javascript - Fine Uploader - 在缩放图像上获取文件而不是原始图像

Question

我正在使用精细上传程序将文件上传到我的亚马逊 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);

});

Answer 1

您可以调用 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);

});