Canvas toDataURL图片跨域问题

最近搞题库，遇到个后端要求，图片在编辑器传完后要转成 Base64 ，方便后端生成 Word 文档。

一想很简单啊，就写了，由于方便本地开发，Chrome 浏览器配置了跨域，自己机子上试了下没问题就提交了，在测试环境下，发现图片传上去后不显示，一看报错信息，跨域了，只是访问个图片路径怎么就跨域了，详细了解后才知道，Canvas 使用加载跨域图片的 img，除了要设置的 crossOrigin 属性，还要看该跨域图片所在的服务器是否允许跨域访问。很显然，我这里引用的图片跨域了。

报错信息：

报错信息如下：

Access to Image at 'http://a.com/pic/1.jpg' from origin 'http://b.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://b.com' is therefore not allowed access.

解决办法：

1、需要图片服务器添加 Access-Control-Allow-Origin: *

各种后端语言和web服务器怎么设置Access-Control-Allow-Origin

2、在 toDataURL 前需要设置 crossOrigin

var img = new Image();
img.crossOrigin = "Anonymous"; //重要
img.src = url;

img.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

    dataURL = canvas.toDataURL('image/jpeg');
}

让运维哥哥配置了图片服务器的跨域支持就可以了。

深入阅读：

关于canvas的toDataURL报错问题

canvas 跨域问题如何解决？

跨域资源共享 CORS 详解