加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

关于canvas.toDataURL 在iOS运行失败的题目办理

发布时间:2020-09-23 18:34:32 所属栏目:编程 来源:网络整理
导读:这篇文章首要先容了关于canvas.toDataURL 在iOS运行失败的题目办理,文中通过示例代码先容的很是具体,对各人的进修可能事变具有必然的参考进修代价,必要的伴侣

/** * 加载图片 * @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 = ""; // 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运行失败内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章,但愿各人往后多多支持剧本之家!

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读