ファイルピッカーでアップロードされたファイルのドキュメントプレビューを生成するために Google Viewer を使用するために、いくつかのコードを一緒にハックしようとしています。しかし、それは空白になり続けます。画像にどんなConversionDelay
値を渡しても、常に空のドキュメント ビューアーです。誰かがそれを機能させる方法を知っていますか、またはおそらくプレビューを生成するための代替方法を知っていますか?
HTML:
<table>
<tr>
<td>
<input type="filepicker-dragdrop" data-fp-apikey="GET_A_FILEPICKER_APIKEY_AT_FILEPICKER.IO" data-fp-button-text="Pick a file" data-fp-drag-text="Or even drop something here" data-fp-option-modal="false" name="dragDrop" id="inputFile" />
</td>
</tr>
<tr>
<td>
<div id="dvStatus"></div>
</td>
</tr>
<tr>
<td>Preview
<br>
<div id="imgThumbnail-wrapper">
<canvas id="preview" height="200px" width="200px" style="width:200px;height:200px;overflow:hidden;"></canvas>
</div>
<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', $('canvas')[0].toDataURL());" download="MyImage.png" href="#" target="_blank">Download Preview</a>
<a id="btnCrop" href="#crop">Adjust Preview</a>
</td>
</tr>
<tr id='trCrop'>
<td>
<div id="imgSnapShot-wrapper">
<img id="imgSnapShot">
</div>
</td>
</tr>
</table>
JS:
$(document).ready(function () {
var snapShotSelector = '#imgSnapShot',
$snapShot = $(snapShotSelector),
$canvas = $('#preview'),
$status = $('#dvStatus');
$('#inputFile').on("change", function () {
$snapShot.hide();
var fileurl = event.files[0].url.replace(/https/, "http");
$status.html("File upload URL: <a href='" + fileurl +"'>" + fileurl + "</a><br />Converting, please wait...");
var url = "http://docs.google.com/viewer?url=" + escape(fileurl) + "&embedded=true";
$("#gPreviewLink").attr("href", url).text(url).show();
$.ajax({
type: "POST",
dataType: 'jsonp',
url: 'http://do.convertapi.com/Web2Image/json/',
data: {
CUrl: url,
ConversionDelay: 1,
UserAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36',
PageWidth: 960,
PageHeight: 1100,
Plugins: false
},
jsonp: "callback",
success: loadFileSuccess,
});
});
function loadFileSuccess(data) {
if (data.Result) {
$snapShot.attr('src', 'data:image/png;base64,' + data.File).show();
$status.html($status.html() + "<br />Document converted.");
if ($.Jcrop(snapShotSelector)) $.Jcrop(snapShotSelector).destroy();
$snapShot.Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1
});
var image = new Image();
image.onload = function () {
// Show image preview
var canvas = $canvas[0];
var context = canvas.getContext("2d");
context.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
$(this).remove();
}
image.src = 'data:image/png;base64,' + data.File;
} else {
$status.html($status.html() + "<br/><span style='color:red'>Error: " + data.Error + "</span>");
}
}
function updatePreview(c) {
if (parseInt(c.w) > 0) {
// Show image preview
var imageObj = $snapShot[0];
var canvas = $canvas[0];
var context = canvas.getContext("2d");
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
}
}
})