近来做了一个海报生成的组件，必要drawimage到画布上，image来源包括本地和异地的图片src;
首先讲一点，异地图片如果不设置允许跨域访问，canvas.toDataURL是无法画image的，报画布污染的错；首先放一张我要生成的图；
上面加载了两张本地图片，两张异地图片，写了一些文字；在windows谷歌欣赏器跑是好的，是吧，图片画出来，感觉无压力；用安卓也是好的，很开心；可是到IOS手机上，我去，怎么图片表现不出来啊，然后
try catch 错误，没啥有用的信息；
[code]
try {
// 将canvas对象转化为image/png
var dataUrl = canvas.toDataURL('image/png')
} catch (err) {
console.log(err)
}
[/code]
我擦，这怎么办？？？
然后去cnbing搜，很多多少相同题目，很多多少原因，有个老外说动态更改canvas宽高无法再ios画出图片；还有的人说：
图片文件 size 太大，是否图片凌驾了 3M ? -----------[code]我看了下生成的图片才几百kb PASS[/code]
图片的 dimension 太大，是否图片尺寸凌驾了 1000 x 1000 像素？[code]我的尺寸确实凌驾了，宽高都超了，然而测试了下小的宽高，照旧ios画不出来啊~~~PASS[/code]
你指定的 mime_type 不支持，你用的是哪个 mime type?—[code]canvas的 toDataURL API我看过了，可以支持三个范例，各试了一遍，无果 PASS[/code]
先上我的代码：
[code]
<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>
[/code]
[code]
<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>
[/code]
盘问了好久，最后找到bug，就是下面这个function
[code]
/**
* 加载图片
* @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
})
},
[/code]
有没有注意到crossOrigin属性是在src属性之后赋值的；/(ㄒoㄒ)/~~
[code]crossOrigin属性必须在src属性之前赋值[/code]
[code]crossOrigin属性必须在src属性之前赋值[/code]
[code]crossOrigin属性必须在src属性之前赋值[/code]
尽管没有找到准确的文档明确指定crossOrigin属性必须在src属性之前赋值，但是要适配IOS确实要这么做；
大家如果对 crossorigin 有疑问可以看一下MDN对crossorigin的解释：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
里面讲了画布的污染和办理方法，就是设置 crossorigin = “Anonymous”;里面的方法也是先设置crossorigin在图片加载完后设置 src;
如下
[code]
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;
}
[/code]
到此这篇关于关于canvas.toDataURL 在iOS运行失败的题目办理 的文章就先容到这了,更多相关canvas.toDataURL在iOS运行失败内容请搜刮脚本之家从前的文章或继续欣赏下面的相关文章，渴望大家以后多多支持脚本之家！
来源：https://www.jb51.net/html5/745320.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
