Fine uploader 模板：作为背景图像预览

我需要的罚款上传能够作为背景图像绘制缩略图，或以其他方式创建缩放和裁剪的广场

基本上，我试图重现我在angularjs/flowjs中使用的行为，它（或多或少）：

使用UI模式会给我带来完全相同的问题，我只能将其用作src，如下所示：

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

如果广泛采用，另一种解决方案是使用元素作为背景（因为我可以使用画布作为#图像背景），但目前这不是一种实用的解决方案：

另一个解决方案是监视$（'#image img'）.attr（'src'）上的更改。隐藏img元素并设置更改时#image的背景图像。但是，当编码图像就在那里时，这是另一个荒谬的解决方案

如果还没有一种方法可以通过fine uploader实现这一点，那么为什么要限制img类型的元素呢？为什么不接受任何元素和属性？为什么不直接返回base64图像并将其设置为任意属性

---

提前感谢。

听起来最简单的解决方案是让Fine Uploader生成一个缩略图，从

中向API方法传递一个临时的

属性，并使用该属性构建背景图像

例如：

请显示您的一些代码和尝试。这对于为你提供一个快速的解决方案是很重要的。你认为这个问题足够好，可以保证一个解决方案吗？可能最简单的解决方案是，如果有裁剪，而不是宽度和高度的简单最大值。也许这正是我所缺少的。我发现了如何用css制作出模拟比例和裁剪的完美正方形。啊，这是一个很好的答案。我最终使用了支持度较低的对象fit:cover。我可能会转向你的答案。（为什么我没有想到暂时使用img？）
#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);
}

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

#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
}

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 + '")';
        });
}