Fine Uploader - получить файл на масштабированном изображении, а не на оригинале

Я использую Fine Uploader для загрузки файлов на свой amazon s3, и я использую новую опцию масштабирования изображения. В прекрасных документах загрузчика упоминается:

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

Однако возможно ли, чтобы я каким-то образом вызывал getFile на масштабированном изображении, возможно, в другом вызове?

Причина в том, что после отправки я рисую изображение на холсте с помощью html5 и Fabricjs и сталкиваюсь с ошибка сжатого отношения iOS, и когда я загружаю на s3, я получаю ошибки безопасности перекрестного происхождения для упомянутых распространенных взломов / исправлений. Я знаю, что если я могу использовать ответ getFile масштабированного изображения, а не оригинала, проблема не возникает, поскольку изображение достаточно маленькое, чтобы на него не влиял сафари.

Так можно ли как-то вызвать 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);

});

javascript canvas scaling fabricjs fine-uploader
person odd_duck    schedule 16.07.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете получить предварительный просмотр изображения, вызвав 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);

});
person Mark Feltner    schedule 16.07.2014