我正在使用精细上传程序将文件上传到我的亚马逊 s3,并且我正在利用新的图像缩放选项。在精美的 uploader 文档中提到:
calling getFile on a scaled image will still return the original file.
但是,我是否可以在不同的调用中以某种方式在缩放图像上调用 getFile
?
原因是提交后我使用 html5 和 Fabricjs 将图像绘制到 Canvas 上并运行到 iOS squashed ratio bug当我上传到 s3 时,我遇到了提到的常见黑客/修复的跨源安全错误。我知道,如果我可以使用缩放图像而不是原始图像的 getFile 响应,那么问题就不会出现,因为图像足够小,不会受到 safari 的影响。
那么是否有可能以某种方式在缩放后的图像上调用 getFile ?
我的 uploader 设置如下:
jQuery("#fine-uploader").fineUploaderS3({
...
scaling: {
sendOriginal: false,
sizes: [
{name: "ios", maxSize: 500}
]
},
objectProperties: {
key: function (fileId) {
var filename = jQuery('#fine-uploader').fineUploader('getName', fileId);
var uuid = jQuery('#fine-uploader').fineUploader('getUuid', fileId);
var ext = filename.substr(filename.lastIndexOf('.') + 1);
//return item_number + uuid + '.' + ext;
return item_number + '.' + ext;
}
}
}).on('submitted', function(event, id, name) {
var file = jQuery('#fine-uploader').fineUploader('getFile', id);
drawOntoCanvas(file);
});
最佳答案
您可以调用 getItemByFileId
获取图片预览这将得到 HTMLElement
代表File
.
var file = $(this).fineUploader('getItemByFileId',id),
该元素中嵌套了一个带有 '.qq-thumbnail-selector'
的元素类,其预览呈现在 <img>
上标签。我们可以使用 jQuery(或 native DOM)来实现这一点。
var thumbnail = $(file).find(".qq-thumbnail-selector");
最后,使用 drawThumbnail
将图像渲染到 Canvas 上这将正确将图像放置到 Canvas 标签上。
<canvas id="canvas"><canvas>
...
var $canvas = $("#canvas");
$(this).fineUploader('drawThumbnail', id, $canvas);
我通过将此代码放入 'submitted'
中来测试它事件处理程序:
.on('submitted', function(event, id, name) {
var file = $(this).fineUploader('getItemByFileId',id),
thumbnail = $(file).find(".qq-thumbnail-selector");
$(this).fineUploader('drawThumbnail', id, $canvas);
});
关于javascript - Fine Uploader - 在缩放图像上获取文件而不是原始图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24780260/