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

问题描述

问 题

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

微信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**

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

解决方案

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

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

这篇关于javascript - 微信chooseimage接口获取图片后（canvas.toDataURL）转 base64 失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！