canvas使用跨域的图片时，image.crossOrigin = 'Anonymous'，Tainted canvases may not be exported？-灵析社区

颜如玉你信不信

canvas使用跨域的图片时，不加 image.crossOrigin = 'Anonymous'; 图片可以绘制，但是不能调用 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。 Unable to get data URL. Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. * * * 如果加上 image.crossOrigin = 'Anonymous'; 报错 Access to image at '[http://10.10.10.112/product/AVWT-154FESSA.png](https://link.segmentfault.com/?enc=JeRA33nLTv1MVvDNgHrIZQ%3D%3D.8Oa6vULI1ZNQFa5cSe9uMHuUaBRZvAQb1p9KvyhU9CavWBz3w5jE5encrHHSaiDe)' from origin '[http://localhost:8080](https://link.segmentfault.com/?enc=poxWpYYi2YCGtKvfD3BMVg%3D%3D.MrVRz8SHAuf02EeuWUgRPSjMwmeJZ7C15PN5zia%2BeKg%3D)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. * * * **问题的原因：是后端没有配置允许接受跨域**

阅读量：17

点赞量：0

问AI
换下小写试试 image.setAttribute(‘crossorgin’,’anonymous’) 将image作为文件读取blob流,ctx.toBlob 试试 export function imageToFileByCanvas(image: HTMLImageElement, fileName: string = "image.jpg"): Promise { const canvas = document.createElement("canvas") canvas.width = image.width canvas.height = image.height const ctx = canvas.getContext("2d")! ctx.drawImage(image, 0, 0) return new Promise(resolve => canvas.toBlob(blob => resolve(new File([blob!], fileName)))) } async function getImage(){ const file = await imageToFileByCanvas(image, "image.jpg") const imgUrl = URL.createObjectURL(file) // image 内存地址 } export function imageToFileByBlob(image: HTMLImageElement, fileName: string = "image.jpg") { const binStr = atob(image.src.split(",")[1]) const len = binStr.length const arr = new Uint8Array(len) for (let i = 0; i < len; i++) { arr[i] = binStr.charCodeAt(i) } const blob = new Blob([arr], { type: "image/png" }) return new File([blob], fileName) } "stackoverflow" (https://link.segmentfault.com/?enc=kFtkQSkasHBMKuskptbbMg%3D%3D.R6llpqfI0vhSSR%2FNDd5nUCitYX2MAGg8PeXSAzGLkJm7pvs2VA5%2BsbGT6qCa%2B%2B%2FCd8DfZwRpj7NcUelaTo2jtjlO0yB2jm5NKMH5lHYZJNdz0Uu6xn8cYKQ6KJq55gs2)