如何将图像从 url 沿侧输入类型文件加载到 html5 画布？

Question

我正在开发这个应用程序，我需要从 url 以及用户的硬盘驱动器将图像上传到 html5 画布。我已经为用户从硬盘驱动器输入实现了功能，但我不知道如何从 url 添加图像。

我用来从input type file 加载的代码都在输入的事件监听器中。它有很多功能，因为该应用程序还需要在图像上输入text。所以image from url 也应该有同样的功能。

请注意imgObj 在事件监听器中。我尝试将 img.src 更改为 url 来测试它，但即使图像加载，我也无法再下载它。控制台抛出此错误：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at HTMLButtonElement.<anonymous>

这里的代码减去了一些不需要在这里展示的函数：

const canvas            = document.getElementById('canvas');
const ctx               = canvas.getContext('2d');
const btnDownload       = document.getElementById('btnDownload');
const fileUpload        = document.getElementById('file-upload');

fileUpload.addEventListener('change', function(e) {
    let imgObj          = new Image();
    imgObj.onload       = draw;
    imgObj.onerror      = failed;
    imgObj.src          = URL.createObjectURL(this.files[0]);
    // imgObj.src          = 'https://static.vecteezy.com/system/resources/previews/000/094/478/original/free-abstract-pattern-vector.jpg';
    

    // some functions to write on image

});


function draw() {
    canvas.width        = this.naturalWidth;
    canvas.height       = this.naturalHeight;
    const nw            = this.naturalWidth;
    const nh            = this.naturalHeight;

    ctx.drawImage(this, 0, 0, nw, nh);
};
    
function failed() {
    console.error("The provided file couldn't be loaded as an Image media");
};

btnDownload.addEventListener('click', () => {

    const a = document.createElement('a');
    document.body.appendChild(a);
    a.href = canvas.toDataURL();
    a.download = "canvas-image.png";
    a.click();
    document.body.removeChild(a);

});

<canvas id="canvas" width="800" height="500"></canvas>
<input type="file" id="file-upload" />
<button id="btnDownload">Download</button>

简而言之，如何通过保留upload from input 功能来添加upload from url 功能？

请注意，对于upload from url 功能，输入侦听器内部的内容将是相同的。所以可能我必须对imgObj 和img.src 做点什么。

Answer 1

您遇到了 CORS 问题。 CORS 是一种协议，旨在防止网站从其他网站访问您的数据（跨域数据）。由于图像在网络早期就已经存在，由于向后兼容性问题，无法阻止跨域图像加载，但可能会阻止访问此类数据。

因此，当您将跨域图像绘制到画布中时，画布会被“污染”，因此您无法再用它做很多事情，包括将其内容作为数据 URL 检索。从文件系统上传的图像是安全的，因为用户必须选择加入。

所以为了使用图片数据，你必须告诉浏览器图片必须以跨域方式加载。您可以通过设置 crossOrigin 属性或属性来做到这一点：

<img src="https://static.vecteezy.com/system/resources/previews/000/094/478/original/free-abstract-pattern-vector.jpg" crossorigin>

let imgObj = new Image();
imgObj.src =
      "https://static.vecteezy.com/system/resources/previews/000/094/478/original/free-abstract-pattern-vector.jpg";
imgObj.crossOrigin = "";

使用此属性/属性，如果图像不支持 CORS，则加载将失败，甚至不会显示。但如果确实如此，就像本例一样，您将能够获取图像数据。