canvas 跨域

Question

我这个下面的canvas.toDataURL报错，是因为上面的picUrl图片地址跨域，有什么办法解决？

            img.src = picUrl;//图片跨域了
            
            img.onload = function(){
                
                var ctx = canvas.getContext("2d");
                ctx.clearRect(0,0,canvas.width,canvas.height);
                if(img.height > 800){
                   img.width *= 800 / img.height;
                   img.height = 800;
                }                
                if(img.width > 800){
                   img.height *= 800 / img.width;
                   img.width = 800;
                }
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                var imgUrl = canvas.toDataURL("image/jpeg");
            }

Answer 1

想办法解决跨域问题，两种思路：

• 1、修改图片域名为同域

• 2、为图片服务添加CROS（跨域）支持，具体方法是在图片的返回的header中添加Access-Control-Allow-Origin:*，同时在请求图片时，为image元素设置crossOrigin="" 属性设置为空字符串。

Answer 2

同上，你还可以在自己的不跨域的服务器里加个接口，让他去抓图片，前端用的图片访问这个接口