canvas绘制网络图片执行toDataURL()报错
在用canvas绘制的图片然后执行toDataURL()的时候，报了个错。
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at img.onload
# 原因
报错的大概意思是，canvas无法执行toDataURL方法：污染的画布无法输出。
原来这是因为CORS策略，我的图片存在跨域问题，虽然可以使用图像，但是绘制到画布上会污染画布，一旦一个画布被污染，就无法提取画布的数据，比如无法使用画布toBolb(),toDataURL()或getImageData()方法，当使用这些方法的时候，会抛出一个安全错误。
# HTML 属性：crossorigin
crossorigin 属性在 <audio>、<img>、<link>、<script> 和 <video> 元素中有效，它们提供对 CORS 的支持，定义该元素如何处理跨源请求，从而实现对该元素获取数据的 CORS 请求的配置。根据元素的不同，该属性可以是一个 CORS 设置属性。
在媒体元素上所使用的 crossorigin 内容属性为 CORS 设置属性。
这些属性是枚举的，并具有以下可能的值：
anonymous
请求使用了 CORS 标头，且证书标志被设置为 'same-origin'。没有通过 cookies、客户端 SSL 证书或 HTTP 认证交换用户凭据，除非目的地是同一来源。use-credentials
请求使用了 CORS 标头，且证书标志被设置为 'include'。总是包含用户凭据。""
将属性名称设置为空值，如 crossorigin 或 crossorigin=""，与设置为 anonymous 的效果一样。
不合法的关键字或空字符串会视为 anonymous 关键字。
默认情况下（即未指定该属性时），CORS 根本不会使用。用户代理不会要求对资源进行完全访问的许可，在跨源请求的情况下，将根据相关元素的类型进行某些限制：
| 元素 | 限制 |
|---|---|
| img、audio、video | 当资源被放置在 <canvas> 中时，元素会标记为被污染的。 |
| script | 对错误日志 window.onerror 的访问将会被限制。 |
| link | 使用了不合适的 crossorigin 标头的请求可能会被丢弃。 |
# 解决
加上这样一行代码就行了，给图片设置crossOrigin属性。
img.setAttribute("crossOrigin",'Anonymous')