当调用 canvas.toDataURL() 时抛出异常：SECURITY_ERR: DOM Exception 18

[scplwq]

项目中有用到 wx.canvasToTempFilePath，看到框架已经有一些实现代码，尝试连起来，未果。发现一个 bug。

如何重现

1. 运行 iOS Demo，在 Demo中有一个运行 drawImage 的演示
2. 点击 drawImage 按钮
3. 点击 toTempFilePath 按钮

出错代码在 h5/src/view/components/wx-canvas.js

var dataUrl = self.$.canvas.toDataURL();

搜索Error信息，网上的结果是 [跨域问题]
(https://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception?noredirect=1&lq=1), 但是我并没有修改image地址，image 只是本地图片/image/wechat.png. 好像上次 getImageInfo 修复前还没有这个bug（待确认）

[IOriens]

原因

Html5 Canvas with Cross-Domain content

可能的解决方案

方案一

h5 将 canvas 的位置信息发送给客户端，客户端去对应位置截图

方案二

客户端实现 canvas 组件

方案三

客户端中起一个local server，所有本地资源从 server 中拉取，这样它们都在同一个域中

方案四

将 Webview 初始化时设置的 baseurl 改为http://test.com/ ，使用NSURLProtocol拦截本地请求

方案五

图片都使用网络资源，但需要服务器对其设置CORS 请求头

---

微信可能用的方案二？我也不晓得客户端能不能做。。。

[scplwq]

@IOriens 根据微信小程序官方论坛里的资料，微信使用的方案二。坑有点大～～

[IOriens]

@liwangqiang 下一步应该是要把这几个组件 Native 化的，要辛苦客户端同学了😆

[scplwq]

@IOriens iOS 测试了下

1. 如果图片使用网络资源，且服务器支持跨域请求，并且设置 image.crossOrigin = "anonymous" 则 canvas.toDataURL() 没问题
2. 如果是本地图片，则可以设置 image.src="data:image/png;base64,iVBORw0KG..." 这种 Data URI 格式，也是可以规避跨域问题的。