error - canvas- Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.
- Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.
原因就在于使用了跨域的图片,所以说是被污染的画布。
解决方案如下
1】为image请求添加跨域
var image = new Image() image.setAttribute("crossOrigin",'anonymous') image.src = src
但也许有可能服务器不让你跨域请求图片(也不知道为啥),那么用到方案2
2】通过把请求的图片转化成base64再进行使用
代码如下
function getURLBase64(url) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.responseType = 'blob' xhr.onload = function() { if (this.status === 200) { var blob = this.response var fileReader = new FileReader() fileReader.onloadend = function(e) { var result = e.target.result resolve(result) } fileReader.readAsDataURL(blob) } } xhr.onerror = function() { reject() } xhr.send() }) }
Lee2
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步