Template: Preview as background image

Question

I need for Fine Uploader to be able to drawThumbnail as a background image or to otherwise create scaled and cropped squares.

Basically, I am trying to reproduce the behavior I used in angularjs / flowjs, which was (more or less):

// I modified flowjs to set the background-image here instead of src with the base64 image.
<div ng-repeat="file in $flow.files" flow-img background-size: 'cover'">

This is the API on how to draw a thumbnail, but it specifically states that it returns a img or canvas. Instead, I'd like it set to the css property background-image.

http://docs.fineuploader.com/branch/master/api/methods.html#drawThumbnail

This solution gets close, but does not achieve the same effect as background-size: cover.

#image {
   width: 33%;
   padding-top: 33%;
   position: relative;
}

#image canvas {
    position: absolute;
    top: 0;
    bottom: 0;
}

...
callbacks: {
    onSubmit: function(id, fileName) {
    var canvas = document.createElement('canvas');
    canvas.width = 500;
    canvas.height = 500;
    $('#image').html(canvas);
    this.drawThumbnail(id, canvas, 500, false);
}

Using the UI mode give me exactly the same issue, I can only use it as the src like so:

<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>

This is my preferred solution...

#image {
   width: 33%;
   padding-top: 33%;
   position: relative;
   background-size: cover;
}

...
callbacks: {
    onSubmit: function(id, fileName) {
    this.drawThumbnail(); // somehow onto the background property of #image
}

Another solution, if widely adapted, would be to use elements as backgrounds (because then I could use the canvas for the #image background), but as of right now this is not a practical solution:

https://developer.mozilla.org/en-US/docs/Web/CSS/element

Another solution would be to watch for changes on the $('#image img').attr('src'). Hide the img element and set the background-image of #image on change. But, that's another ridiculous solution when the encoded image is right there.

If there isn't already a way to do this with fine uploader, why restrict the element of type img? Why not take any element and any attribute? Why not just return the base64 image and let us set it to any attribute?

Thanks in advance.

Answer 1

It sounds like the easiest solution would be to ask Fine Uploader to generate a thumbnail, pass the API method a temporary <img>, grab the src attribute from the <img> and use that to construct the background-image.

For example:

callbacks: {
    onSubmit: function(id) {
        var tempImg = document.createElement('img'),
            self = this;

        this.drawThumbnail(id, tempImg, 500).then(function() {
            var fileContainerEl = self.getItemByFileId(id);
                previewImg = fileContainerEl.getElementsByClassName('previewImg')[0];               

            previewImg.style['background-image'] = 'url("' + tempImg.src + '")';
        });
}