Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

Lydia500

于 2022-04-25 15:42:36 发布

阅读量510

点赞数 1

分类专栏：前端兼容性 ios 文章标签：前端 reactjs typescript javascript vue.js

本文链接：https://blog.youkuaiyun.com/Cavin80/article/details/124406584

版权

前端同时被 3 个专栏收录

21 篇文章

订阅专栏

兼容性

4 篇文章

订阅专栏

ios

1 篇文章

订阅专栏

该博客探讨了在iPhone XS设备上运行iOS 12系统时遇到的CanvasGetImageData属性兼容性问题。作者提出通过try-catch块来捕获错误，并通过在图片URL中添加时间戳以及设置crossOrigin属性为解决之道。这种方法确保了图片加载的跨域安全，从而修复了在特定设备和系统版本上的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此问题是因为用了Canvas GetImageData属性，兼容问题

此问题是在 IphoneXs机型 ios12 系统下复现
解决方案：
1. 抛出try catch
2. 将图片的地址加上时间戳，然后再设个跨域属性

var img = new Image();
var url = 'http:/wwww.baidu.com.jpg';
img.src = url + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '');