关于canvas.toDataURL 在iOS运行失败的问题解决 详解canvas.toDataURL()报错的解决方案全都在这了canvas.toDataURL image/png 报错处理方法推荐

最近做了一个海报生成的组件，需要drawimage到画布上，image来源包括本地和异地的图片src;
首先讲一点，异地图片如果不设置允许跨域访问，canvas.toDataURL是无法画image的，报画布污染的错；首先放一张我要生成的图；

上面加载了两张本地图片，两张异地图片，写了一些文字；在windows谷歌浏览器跑是好的，是吧，图片画出来，感觉无压力；用安卓也是好的，很开心；可是到IOS手机上，我去，怎么图片显示不出来啊，然后
try catch 错误，没啥有用的信息；

 try { // 将canvas对象转化为image/png var dataUrl = canvas.toDataURL('image/png') } catch (err) { console.log(err) } 

我擦，这怎么办？？？
然后去cnbing搜，好多相同问题，好多原因，有个老外说动态更改canvas宽高无法再ios画出图片；还有的人说：
图片文件 size 太大，是否图片超过了 3M ? -----------我看了下生成的图片才几百kb PASS

图片的 dimension 太大，是否图片尺寸超过了 1000 x 1000 像素？我的尺寸确实超过了，宽高都超了，然而测试了下小的宽高，照旧ios画不出来啊~~~PASS

你指定的 mime_type 不支持，你用的是哪个 mime type?—canvas的 toDataURL API我看过了，可以支持三个类型，各试了一遍，无果 PASS
先上我的代码：

盘查了好久，最后找到bug，就是下面这个function

 /** * 加载图片 * @param {Object} img 图片地址 * @return {Promise} img dom */ loadImage (img) { return new Promise((resolve, reject) => { // image dom 对象 const $image = document.createElement('img') $image.src = img.url if (img.isCross_domain) { console.log(img.url) $image.setAttribute('crossOrigin', 'Anonymous') } $image.onload = () => { resolve($image) } $image.onerror = reject }) }, 

有没有注意到crossOrigin属性是在src属性之后赋值的；/(ㄒoㄒ)/~~
crossOrigin属性必须在src属性之前赋值
crossOrigin属性必须在src属性之前赋值
crossOrigin属性必须在src属性之前赋值
尽管没有找到准确的文档明确指定crossOrigin属性必须在src属性之前赋值，但是要适配IOS确实要这么做；
大家如果对 crossorigin 有疑问可以看一下MDN对crossorigin的解释：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image

里面讲了画布的污染和解决方法，就是设置 crossorigin = “Anonymous”;里面的方法也是先设置crossorigin在图片加载完后设置 src;
如下

 var img = new Image, canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"), src = "http://example.com/image"; // insert image url here img.crossOrigin = "Anonymous"; img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage( img, 0, 0 ); localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") ); } img.src = src; // make sure the load event fires for cached images too if ( img.complete || img.complete === undefined ) { img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; img.src = src; } 

到此这篇关于关于canvas.toDataURL 在iOS运行失败的问题解决 的文章就介绍到这了,更多相关canvas.toDataURL在iOS运行失败内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！