canvas.toDataURL（）返回相同的dataURL

Question

嗨，我目前正在使用Firebase开发离子应用程序。 我正在尝试通过调整大小上传多个文件。

奇怪的是，当我调用resize方法时，输入图像不同，但是一旦完成上传，它最终将上传重复的图像（数组的最后一个图像）。

我在每次调整大小时都对其进行console.log ed的dataURL，发现DataURL始终相同。

以下代码是上传多个文件。

    multipleUpload: function(key, folder, files, targetWidth) {
    var q = $q.defer();
    var ct = Date.now();
    var urls = [];

    var recursive = function (n, args) {
      var arg = args[n];
      ImageService.resize(arg.file, targetWidth)
      .then(function(file) {
        upload(ct + '' + n + key, folder + '/' + key, file, CONFIG.MESSAGE.FILE_UPLOAD + (n + 1) + '번 파일')
        .then(function(url) {
          urls.push(url);
          if (++n < args.length) {
            recursive(n, args);
          } else {
            q.resolve(urls);
          }
        }), function(error) {
          q.reject(error);
        };
      })
    }
    recursive(0, files);

    return q.promise;
  },

以下代码是调整大小的方法

  resize: function(file, targetWidth) {
    var q = $q.defer();
    // Resizing Image
    var img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');
    img.onload = function(){
      var canvas = document.createElement("canvas"),
      ctx = canvas.getContext("2d");
      canvas.width = targetWidth;
      canvas.height = canvas.width * (img.height / img.width);
      ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
      // Data URL to BLOB
      var dataURL = canvas.toDataURL();
      console.log(dataURL); // Returns same dataURL all the time.
      dataURLtoBlob(dataURL, Date.now())
      .then(function(blob) {
        q.resolve(blob);
      });
    };
    img.src = file;
    return q.promise;
  },

Answer 1

首先，我发现一件事很奇怪，它在ios上却可以在android上正常工作。

我开始研究插件选项并禁用allow-edit然后它可以正常工作。 我相信这是插件产生的问题。