Home / Blog / it

Canvas toDataURL图片跨域问题

Author: Vic.Wang 2017/09/12 Tags:javascriptjscanvastoDataURLcrossOriginAccess-Control跨域图片跨域

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

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

报错信息:

Canvas toDataURL报错

报错信息如下:

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 详解