canvas图片跨域怎么解决

Question

在把canvas画出来的图转成图片是报下面的错：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

应该是跨域的问题吧；
加上：image.setAttribute('crossOrigin', 'anonymous');也没用，

要怎么解决的好嘞？

Answer 1

服务器存储那边也要做相应的设置
在跨域的服务器上设置Header为允许跨域请求
可参考http://blog.csdn.net/enter89/...

Answer 2

如果不想修改图片服务器的设置 可以用下面这种做法

以php为例
先用php加载图片 然后转换成base64编码 用来给img标签的src使用
这样canvas加载img就不会有跨域的问题了

php

private function imgToBase64($img_url) {
        $imageInfo = getimagesize($img_url);
        $bae64 = chunk_split(base64_encode(file_get_contents($img_url)));
        $encode = 'data:'.$imageInfo['mime'] .';base64,' . $bae64;
        return $encode;
    }

html

<img id='img' src='<?= $encode; ?>'>

js

let img = document.getElementById('img');
ctx.drawImage(img)