这篇文章主要介绍了关于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)
&