微信chooseimage接口获取图片后（canvas.toDataURL）转 base64 失败

Question

各位大神，最近开发一个手机端上传图片并裁剪的项目，流程为：

微信chooseimage接口选取图片并返回 localIds  -->  将 localIds 赋值给自己的img并操作（放大、缩小、位移等）--> 将图片画在canvas中 --> canvas.toDataURL

现在问题就卡在了最后一步生成base64码，提示画布污染，使用了网上主流解决方式 img.crossOrigin = '*' 或 img.crossOrigin = '' 或 img.crossOrigin = 'anonymous' ，都不起作用

代码（大体）：

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d");
var imgCanvas = new Image(); 
imgCanvas.crossOrigin = '*'; 
imgCanvas.src = localIds[0]; 
ctx.drawImage(imgCanvas, 0, 0); 
***var imageData = canvas.toDataURL("image/jpeg");*** //报错

**备注：这个代码在pc端项目中使用input file 来获取图片实现没有问题，放在微信中生成的时候报错，初步怀疑与chooseimage接口的返回值有关系，这个返回的url为
weixin://resoureceid/xxxxxxxxxxxx**

各位大神，望指点一二，万分感谢

Answer 1

因为canvas操作图片数据不能跨域啊。

如果你一定要用微信的接口来实现这个，需要先上传到微信的服务器，然后你们后端再从微信服务端获取图片，然后给你们前端使用...........

Answer 2

楼主解决这个问题了吗？我也遇到了同样的问题，怎么解决的？

Answer 3

localId是用来给微信客户端用的，不是http或者dataURL格式，当然不能这样用了。
它的格式是

weixin://resoureceid/xxxxxxxxxxxx**

而HTML5的Image对象需要的是互联网url，不认得weixin://协议头的

Answer 4

新发现，跟微信chooseimage接口没有关系，不使用接口，图片换成一个远程图片（http://www.junshiqianyanwang.com/uploads/allimg/150208/14453132W_1.png）也不行，为图片加上了imgCanvas.crossOrigin = ''会直接打不开资源，无法显示，无法执行imgCanvas.onload ，不加这个属性，canvas转base64码的时候又会提示画布污染，请大神们指点，crossOrigin属性的使用必须建立在远程服务器上配置Access-Control-Allow-Origin ""的基础上么？如果没有配置，前端加了这个属性，反而连预览都无法预览，提示错误语：

Image from origin 'http://www.junshiqianyanwang.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No

'Access-Control-Allow-Origin' header is present on the requested

1. Origin 'http://www.lazyyy.net' is therefore not allowed
   access.

参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image

Answer 5

有次遇到了 也是这样 后面后端将请求到的微信头像保存到自己的服务器再绘制上去的.

Answer 6

楼主请问问题解决了吗？？最近做一个h5也遇到类似的问题了！求解答啊！！！！！

Answer 7

也遇到过这个问题，IOS下没问题，安卓下canvas 不能 toDataURL

Answer 8

楼主，你解决了吗？？？求回复啊！