使用 Pica 的 Fineuploader drawThumbnail

Question

我是 Fineuploader 的新手，并且将这个很棒的上传器与 Pica 一起用于图像缩放。 Pica 适用于缩放和缩略图。

scaling: {
    sendOriginal: false,
    hideScaled: false,
    sizes: [                            
        {name: "a", maxSize: 200},
        {name: "b", maxSize: 600},
        {name: "c", maxSize: 1000}
    ],
    customResizer: !qq.ios() && function(resizeInfo) {
        return new Promise(function(resolve, reject) {
            pica.debug = console.log.bind(console),
            pica.resizeCanvas(resizeInfo.sourceCanvas, resizeInfo.targetCanvas, {}, resolve)
        })
    }
}, thumbnails: {
    customResizer: !qq.ios() && function(resizeInfo) {
        return new Promise(function(resolve, reject) {
            pica.resizeCanvas(resizeInfo.sourceCanvas, resizeInfo.targetCanvas, {}, resolve)
        })
    }
}

但是，我需要将缩略图绘制到其他地方。我试过谷歌搜索并浏览 Fineuploader 的文档，但仍然没有用 drawThumbnails 制作 Pica 运行。

Fineuploader 的文档

drawThumbnail (id, targetContainer[, maxSize[, fromServer[, customResizer]]])

我当前的代码

var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
$(".frame").html(canvas);
uploader.drawThumbnail(id, canvas, 300, false);

如果有人可以指导我修改当前代码以使用 Pica 制作 drawThumbnail 运行，那就太好了，谢谢。

Answer 1

正如您在问题中指出的那样，文档显示了在使用 drawThumbnail:

时如何使用备用调整器功能

drawThumbnail(id, targetContainer[, maxSize[, fromServer[, customResizer]]])

...因此，您的代码将如下所示：

var canvas = document.createElement('canvas')
var customResizer = function(resizeInfo) {
   return new Promise(function(resolve, reject) {
      pica.resizeCanvas(
         resizeInfo.sourceCanvas, 
         resizeInfo.targetCanvas, 
         {}, 
         resolve
      )
   })
}
canvas.width = 300;
canvas.height = 200;
$(".frame").html(canvas);
uploader.drawThumbnail(id, canvas, 300, false, !qq.ios() && customResizer);

使用 Pica 的 Fineuploader drawThumbnail

Fineuploader drawThumbnail with Pica

fine-uploader

Fineuploader 的文档

我当前的代码