javascript - 将 Canvas 传递给FineUploader无效

我正在将base64图像字符串转换为画布，然后将其传递给FineUploader，但会引发错误。这是我的帐单：

dataURItoCanvas(uploadValue.base64String,
  function(canvas) {
    console.log(canvas);
    $('#uploader').fineUploader('addFiles', canvas);
  });

function dataURItoCanvas(dataURI, onsuccess) {
  var img = new Image();

  img.onerror = onerror;
  img.onload = function onload() {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    if (onsuccess) {
      onsuccess(canvas);
    }
    //canvas.toBlob(onsuccess);
  };
  img.src = dataURI;
  img.style = "display:none;";
  document.body.appendChild(img);
}

并抛出此错误：

[FineUploader 4.2.2] Received 0 files or inputs.
jquery.fineuploader-4.2.2.min.js:16 Uncaught TypeError: Cannot read property 'file' of undefined
    at qq.FineUploader._prepareItemsForUpload (jquery.fineuploader-4.2.2.min.js:16)
    at qq.FineUploader._prepareItemsForUpload (jquery.fineuploader-4.2.2.min.js:17)
    at qq.FineUploader.addFiles (jquery.fineuploader-4.2.2.min.js:16)
    at e.fn.init.j (jquery.fineuploader-4.2.2.min.js:19)
    at HTMLDivElement.<anonymous> (jquery.fineuploader-4.2.2.min.js:19)
    at Function.each (VM259 jquery-1.10.2.min.js:4)
    at e.fn.init.each (VM259 jquery-1.10.2.min.js:4)
    at e.fn.init.a.fn.fineUploader (jquery.fineuploader-4.2.2.min.js:19)
    at 59?mobile=true&[email protected]&password=password&v=1491980632786289328:4526
    at HTMLImageElement.onload (59?mobile=true&[email protected]&password=password&v=1491980632786289328:4556)
_prepareItemsForUpload @ jquery.fineuploader-4.2.2.min.js:16
_prepareItemsForUpload @ jquery.fineuploader-4.2.2.min.js:17
addFiles @ jquery.fineuploader-4.2.2.min.js:16
j @ jquery.fineuploader-4.2.2.min.js:19
(anonymous) @ jquery.fineuploader-4.2.2.min.js:19
each @ VM259 jquery-1.10.2.min.js:4
each @ VM259 jquery-1.10.2.min.js:4
a.fn.fineUploader @ jquery.fineuploader-4.2.2.min.js:19
(anonymous) @ 59?mobile=true&[email protected]&password=password&v=1491980632786289328:4526
onload @ 59?mobile=true&[email protected]&password=password&v=1491980632786289328:4556

使用Blob我也遇到了相同的错误：

dataURItoCanvas(uploadValue.base64String, function (canvas) {
                                    console.log(canvas);
                                    canvas.toBlob(function (blob) {
                                        $('#uploader').fineUploader('addFiles', { files: [blob] });
                                    });
                                });

最佳答案

正如您在4.2.2版的文档addFiles中所见，它不支持CanvasWrapper。

更新到最新版本（5.x.x以上）时应该没问题

作为备选。 addBlobs()位于4.x.x中（而不是fineUploader('addFiles', { files: [] })。
所以你可以做类似的事情

canvas.toBlob(function(blob) {
   $('#uploader').addBlobs( [blob] )
})