html <img src=...> 有效，但 JS 图像加载导致 CORS 错误

Question

我想在 js+jquery 中创建图片编辑器。第一步，我要求用户提供图片网址。但是当我尝试在 JS 中加载图像数据（生成 base64 图像 uri）时遇到了问题。我在控制台中收到错误：… has beeb blocked by CORS policy: Access-Control-Allow-Origin …. 但我想知道为什么？如果在 html 文件中我创建例如（图像热链接）：

<img  src="https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg" />

浏览器加载图像没有任何 CORS 问题！这是我的 JS 代码，对于相同的图像抛出 CORS 问题：

 function downloadFile(url) {
    console.log({url});    
    var img = new Image();
    img.onload = function() {
        console.log('ok'); 
        // never execute because cors error
        // … make base64 uri with image data needed for further processing
    };

    img.crossOrigin = "Anonymous";
    img.src = url;
}

所以问题是 - 如何强制 JS 加载图像（作为 html-tag 加载它）并将其转换为 base64 url​​ 以避免 CORS 问题？

https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg

Answer 1

我试图找到我自己的解决方案（JS ES6），但只找到了部分。我们能够将 img 从无 CORS 支持的 src 加载到画布中，但浏览器将 cavnas 切换到“污点模式”，这不允许我们调用toDataURL（以及对内容的任何其他访问）。

function loadImgAsBase64(url, callback) {
  let canvas = document.createElement('CANVAS');
  let img = document.createElement('img');
  //img.setAttribute('crossorigin', 'anonymous');
  img.src = url;

  img.onload = () => {
    canvas.height = img.height;
    canvas.width = img.width;
    let context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);
    let dataURL = canvas.toDataURL('image/png');
    canvas = null;
    callback(dataURL);
  };
}


let url = 'http://lorempixel.com/500/150/sports/9/';

this.loadImgAsBase64(url, (dataURL) => {
   msg.innerText = dataURL.slice(0,50)+'...';
});

IMAGE DATA: loading...<br>
<div id="msg"></div>

因此，克服这个障碍的唯一方法是创建代理服务器（例如在 PHP 中），它将启用 CORS，它将下载给定 url 的图像并在 JS 中发送回我们的应用程序。我找到了一些免费的服务器https://cors-anywhere.herokuapp.com，我们可以在开发和测试中使用它。下面是从给定图像 url 返回 dataUri 的完整功能代码：

function loadImgAsBase64(url, callback) {
  let canvas = document.createElement('CANVAS');
  let img = document.createElement('img');
  img.setAttribute('crossorigin', 'anonymous');
  img.src = 'https://cors-anywhere.herokuapp.com/' + url;

  img.onload = () => {
    canvas.height = img.height;
    canvas.width = img.width;
    let context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);
    let dataURL = canvas.toDataURL('image/png');
    canvas = null;
    callback(dataURL);
  };
}


let url = 'http://lorempixel.com/500/150/sports/9/';

this.loadImgAsBase64(url, (dataURL) => {
   msg.innerText = dataURL.slice(0,50)+'...';
   // show pic
   document.body.innerHTML += `<img src="${dataURL}">`
});

IMAGE DATA Loading...<br>
<div id="msg"></div>

这就是全部:)（我在 chrome、firefox 和 safari 上测试过）