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

最近做了一个海报天生的组件，必要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
先上我的代码：

<template> <div id="Poster"> <div class="mask" @click="hidePoster()"></div> <canvas ref="canvas" width="588" height="1044" style="display:none;"></canvas> <div ref="box" id="Poster-box" @click.stop> <span class="close" @click="hidePoster()"></span> </div> <p class="tip">长安按海报发送给伴侣</p> </div> </template>

<script> export default { data () { // 参数 const u = navigator.userAgent // ios终端 const isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端 return { // 返回参数 localUrl: isIOS ? location.href.split('#')[0] : location.href, // 当前路径 canvas: Object // canvas工具 } }, mounted () { this.initCanvas() }, methods: { /** * 潜匿海报 */ hidePoster () { this.$emit('hide') }, /** * 加载图片 * @param {Object} img 图片地点 * @return {Promise} img dom */ loadImage (img) { return new Promise((resolve, reject) => { // image dom 工具 const $image = document.createElement('img') if (img.isCross_domain) { console.log(img.url) $image.setAttribute('crossOrigin', 'Anonymous') } $image.onload = () => { resolve($image) } $image.src = img.url $image.onerror = reject }) }, /** * init初始化canvas函数 */ async initCanvas () { // 获取vue实例 var vm = this vm.$indicator.open({ text: '加载中...', spinnerType: 'fading-circle' }) this.canvas = this.$refs.canvas.getContext('2d') this.canvas.height = 400 this.canvas.width = 300 this.canvas.fillStyle = '#ffffff' this.canvas.fillRect(0, 0, 588, 1044) // image urls const imgArr = [ { url: require('../assets/poster-banner.png'), isCross_domain: false }, { url: require('../assets/shadow.png'), isCross_domain: false }, { url: 'https://s3-011-shinho-syj-uat-bjs.s3.cn-north-1.amazonaws.com.cn/mall/2019_06/border04.png', isCross_domain: true }, { url: 'https://s3-011-shinho-syj-uat-bjs.s3.cn-north-1.amazonaws.com.cn/mall/2019_06/132.jpg', isCross_domain: true } ] // image doms await Promise.all(imgArr.map(img => this.loadImage(img))).then((imgs) => { console.log('done') this.canvas.drawImage(imgs[0], 0, 0, 588, 216 * 2) this.canvas.drawImage(imgs[1], 97 * 2, 166 * 2, 100 * 2, 100 * 2) this.canvas.save() this.canvas.beginPath() this.canvas.arc(147 * 2, 214 * 2, 34 * 2, 0, 2 * Math.PI, false) this.canvas.clip() this.canvas.drawImage(imgs[2], 113 * 2, 180 * 2, 68 * 2, 68 * 2) this.canvas.restore() this.canvas.drawImage(imgs[3], 189 * 2, 409 * 2, 88 * 2, 88 * 2) // 绘制笔墨 this.drawText('我就是个我就账号账号', 147 * 2, 278 * 2, 290 * 2, '#333333', '32px PingFangSC-Regular ') this.drawText('声誉称谓是我', 147 * 2, 300 * 2, 290 * 2, '#999999', '26px PingFangSC-Regular ') this.drawText('间隔冲榜还差10人', 147 * 2, 340 * 2, 290 * 2, '#FA6F5B', 'bold 36px arial') this.drawText('快来助我冲榜赢红烧酱油吧', 147 * 2, 370 * 2, 290 * 2, '#FA6F5B', 'bold 36px arial ') this.drawText('扫描二维码', 180 * 2, 443 * 2, 172 * 2, '#333333', '28px PingFangSC-Regular ', 'right') this.drawText('直达冲榜勾当', 180 * 2, 463 * 2, 172 * 2, '#333333', '28px PingFangSC-Regular ', 'right') this.drawText('约请挚友跟你一路冲大奖', 180 * 2, 483 * 2, 172 * 2, '#333333', '28px PingFangSC-Regular ', 'right') this.showPic() vm.$indicator.close() }) }, /** * 绘制笔墨 * @param {String} title 笔墨名称 * @param {Number} x x轴坐标 * @param {Number} y y轴坐标 * @param {Number} maxwidth 最大宽度 * @param {String} color 颜色 * @param {String} font 字体样式 * @param {String} textalign 笔墨排版 */ drawText (title, x, y, maxwidth, color, font, textalign = 'center') { this.canvas.font = font this.canvas.textAlign = textalign this.canvas.fillStyle = color this.canvas.fillText(title, x, y, maxwidth) }, /** * 表现图片 */ showPic () { // 获取canvas工具 let canvas = this.$refs.canvas try { // 将canvas工具转化为image/png var dataUrl = canvas.toDataURL('image/png') } catch (err) { console.log(err) } // 建设img 元素 var newImg = document.createElement('img') newImg.src = dataUrl newImg.style.width = '100%' newImg.style.height = '100%' newImg.className = 'img-poster' newImg.style.borderRadius = '8px' this.$refs.box.appendChild(newImg) } } } </script>

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

（编辑：湖南网）

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