将Canvas传递给FineUploader不起作用

时间:2017-04-12 07:07:53

标签: javascript jquery fine-uploader

我正在将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&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4526
    at HTMLImageElement.onload (59?mobile=true&usernameOrEmail=idrees@fi.ae&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&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4526
onload @ 59?mobile=true&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4556

使用Blob我也得到同样的错误:

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

1 个答案:

答案 0 :(得分:3)

正如您在其文档中看到的addFiles版本4.2.2不支持df2 = df[['name','openLots','occupationRatio','DoW','Hour']] fig, axs = plt.subplots(figsize=(24,24), nrows=7, ncols=6) axs = axs.flatten() locations = df2['name'].sort_values().unique() def occupation_heatmap (name, ax): dfn = df2[df2['name'] == name] dfn = dfn.groupby(['DoW', 'Hour']).mean()['occupationRatio'].unstack() dfn = dfn.reindex(['Mon', 'Tue', 'Wed','Thu','Fri','Sat','Sun']) sns.heatmap(data=dfn, cmap="coolwarm", vmin=0, vmax=1.0, ax= ax) ax.set_title(name) i = 0 for n in locations: occupation_heatmap (n, axs[i]) i = i+1 plt.tight_layout()

更新到最新版本(5.x.x以上)

时应该没问题

作为替代方案。 CanvasWrapper位于4.x.x(而不是addBlobs()。 所以你可以做类似

的事情
fineUploader('addFiles', { files: [] })