Fine Uploader - getFile on scaled image not the original

Question

I'm using fine uploader to upload files onto my amazon s3 and i'm taking advantage of the new image scaling option. In the fine uploader docs it mentions:

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

Is it possible however for me to call getFile on the scaled image somehow as well in perhaps a different call?

The reason being that after it is submitted i am drawing the image onto canvas using html5 and fabricjs and running into the iOS squashed ratio bug and as i am uploading to s3 i get cross origin security errors for the common hacks/fixes mentioned. I know that if i can use the getFile response of the scaled image rather than the original then the problem doesn't come up as the image is small enough not to be effected by safari.

So is it possible to somehow call getFile on the scaled image?

My fine uploader setup is below:

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

});

score 0 · Accepted Answer · answered Jul 16 '14 at 22:31

You can get the image preview by calling getItemByFileId which will get the HTMLElement representing the File.

var file = $(this).fineUploader('getItemByFileId',id),

Nested in that element is an element with a '.qq-thumbnail-selector' class which has the preview rendered onto an <img> tag. We can get that with jQuery (or native DOM).

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

Lastly, render the image onto a canvas using drawThumbnail which will, correctly, put the image onto a canvas tag.

<canvas id="canvas"><canvas> ... var $canvas = $("#canvas"); $(this).fineUploader('drawThumbnail', id, $canvas);

I tested it by putting this code inside of the 'submitted' event handler:

.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 on scaled image not the original

1 Answers1