Question

我使用精美的上传程序将文件上传到我的亚马逊s3上，并且我正在利用新的图像缩放选项。在精美的上传者文档中，它提到：

calling getFile on a scaled image will still return the original file.

然而，我是否有可能在缩放图像上以某种方式调用getFile或许是另外一个电话？

原因是在提交之后我使用html5和fabricjs将图像绘制到画布上并运行到iOS squashed ratio bug并且当我上传到s3时，我得到了常见黑客/修复的跨源安全错误提及。我知道如果我可以使用缩放图像而不是原始图像的getFile响应，则问题不会出现，因为图像足够小，不会受到safari的影响。

那么可以以某种方式在缩放图像上调用getFile吗？

我的上传设置如下：

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（或原生DOM）来实现。

var thumbnail = $(file).find(".qq-thumbnail-selector");

最后，使用drawThumbnail将图像渲染到画布上，正确，将图像放到画布标记上。

<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);

});

Fine Uploader - 缩放图像上的getFile而不是原始图像

1 个答案: