无法下载画布内容

Question

所以我尝试使用电子构建一个应用程序，该程序非常基本，用户应该上传几张图片，他们按下一个按钮，我将它们绘制到 <canvas> 元素中，他们应该能够下载它，我遇到的问题是，当我尝试制作可下载按钮时，会引发安全错误，我做了一些研究，发现它是 HTML5 的一个功能，我认为我无法添加 crossOrigin = '匿名'因为用户要从自己的电脑上加载图片，所以我的问题是......

a)- 有没有办法“欺骗系统”并能够下载画布的内容？，

b)- 如果 (a) 不可行...是否有替代方法可以与画布元素类似地工作？

我已经在使用 FileReader() 来获取用户选择的图片，并且我已经将其绘制到画布中，它看起来很棒，我遇到的问题是我无法下载我为那个安全错误创建了。 .toDataURL 不能被调用，因为那是引发错误的那个。

从输入中读取图片的代码：

 function handleBox1(evt) {
    var files = evt.target.files; // FileList object

    for (var i = 0, f; f = files[i]; i++) {
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }
      var reader = new FileReader();

      reader.onload = (function(theFile) {
        return function(e) {

            $('#imgBox1').attr("src",e.target.result);              

        };
      })(f);
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
}

这是一个简单的函数，可以查看是否可以从画布中获取 Url：

descargar = function(){
  var w=window.open('about:blank','image from canvas');
  w.document.write("<img src='"+ totem.toDataURL("image/png")+ "' alt='from canvas'/>");
}

Answer 1

用户应该上传几张图片，我把它们画成一个 元素，他们应该能够下载它

您可以利用包含 IIFE 的 for 循环来处理来自 input type="file" 元素的 files 对象、new Image、onload 事件的 <img> 元素、URL.createObjectURL()、Array.prototype.sort() 以确定最大 @上传的两张图片中的987654331@； Promise.all(), Array.prototype.forEach() 处理img 元素； canvas.toBlob() polyfill 创建一个objectURL 的图像； <a> 元素将download 属性设置为objectURL，表示从两个图像创建的单个图像；图像下载完成后，在 a 元素的 click 处撤销 objectURL。

// if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function(callback, type, quality) {

    var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
      len = binStr.length,
      arr = new Uint8Array(len);

    for (var i = 0; i < len; i++) {
      arr[i] = binStr.charCodeAt(i);
    }

    callback(new Blob([arr], {
      type: type || 'image/png'
    }));
  }
});
//}

var input = document.querySelector("input");
var canvas = document.querySelector("canvas");
var a = document.querySelector("a");
var ctx = canvas.getContext("2d");
var urls = [];

input.onchange = function(e) {
  var images = [];

  for (var i = 0; i < e.target.files.length; i++) {
    (function(j) {
      // var reader = new FileReader();
      // reader.onload = function(event) {
        var img = new Image;
        img.onload = function() {
          images.push(Promise.resolve(this));
          if (images.length === e.target.files.length) {
            Promise.all(images)
              .then(function(data) {
                data.sort(function(a, b) {
                  return a.naturalHeight < b.naturalHeight;
                })
                data.forEach(function(el, index) {
                  if (index === 0) {
                    canvas.width = el.naturalWidth;
                    canvas.height = el.naturalHeight 
                                    + data[index + 1].naturalHeight;
                    ctx.drawImage(el, 0, 0);
                  } else {
                    ctx.drawImage(el, 0, canvas.height - el.naturalHeight);
                  }

                });
                canvas.toBlob(function(blob) {
                  var url = URL.createObjectURL(blob);
                  console.log(blob);
                  a.href = url;
                  a.style.display = "block";
                  urls.push(url);
                });
              })
          }
        }
        img.src = URL.createObjectURL(e.target.files[j]);
      // }
      // reader.readAsDataURL(e.target.files[j]);
    }(i))
  }
}

a.onclick = function() {
  setTimeout(function() {
    urls.forEach(function(obj) {
      URL.revokeObjectURL(obj)
    })
  })
}

<a download="" href="" style="display:none">download</a>
<input type="file" accept="image/*" multiple />
<br>
<canvas></canvas>