本文关键详细介绍了有关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 { // 回到主要参数