最近搞题库，遇到个后端要求，图片在编辑器传完后要转成 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 详解

本文地址：

文章若需转载，请附上原文链接，谢谢配合。^_^