您的位置：首页 > Web前端 > > 正文

canvas如何调试（关于canvas.toDataURL 在iOS运行失败的问题解决）

更多时间：2021-10-23 10:27:02 类别：Web前端浏览量：1001

canvas如何调试

关于canvas.toDataURL 在iOS运行失败的问题解决

最近做了一个海报生成的组件，需要drawimage到画布上，image来源包括本地和异地的图片src;
首先讲一点，异地图片如果不设置允许跨域访问，canvas.toDataURL是无法画image的，报画布污染的错；首先放一张我要生成的图；

上面加载了两张本地图片，两张异地图片，写了一些文字；在windows谷歌浏览器跑是好的，是吧，图片画出来，感觉无压力；用安卓也是好的，很开心；可是到IOS手机上，我去，怎么图片显示不出来啊，然后
try catch 错误，没啥有用的信息；

try {
 // 将canvas对象转化为image.jpg" alt="canvas如何调试（关于canvas.toDataURL 在iOS运行失败的问题解决）" border="0" />

我擦，这怎么办？？？
然后去cnbing搜，好多相同问题，好多原因，有个老外说动态更改canvas宽高无法再ios画出图片；还有的人说：
图片文件 size 太大，是否图片超过了 3M ? -----------我看了下生成的图片才几百kb PASS

图片的 dimension 太大，是否图片尺寸超过了 1000 x 1000 像素？我的尺寸确实超过了，宽高都超了，然而测试了下小的宽高，照旧ios画不出来啊~~~PASS

你指定的 mime_type 不支持，你用的是哪个 mime type?—canvas的 toDataURL API我看过了，可以支持三个类型，各试了一遍，无果 PASS
先上我的代码：

<template>
    <li id="Poster">
        <li class="mask" @click="hidePoster()"></li>
        <canvas ref="canvas" width="588" height="1044" style="display:none;"></canvas>
        <li ref="box" id="Poster-box" @click.stop>
          <span class="close"  @click="hidePoster()"></span>
        </li>
        <p class="tip">长安按海报发送给朋友</p>
    </li>
</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.jpg" alt="canvas如何调试（关于canvas.toDataURL 在iOS运行失败的问题解决）" border="0" />

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

 /**
     * 加载图片
     * @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 = "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.jpg" alt="canvas如何调试（关于canvas.toDataURL 在iOS运行失败的问题解决）" border="0" />

到此这篇关于关于canvas.toDataURL 在iOS运行失败的问题解决的文章就介绍到这了,更多相关canvas.toDataURL在iOS运行失败内容请搜索开心学习网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持开心学习网！

标签：canvas.toDat iOS 运行失败

上一篇：dedecms无缩略图怎么设置（DEDECMS转移data目录后验证码不显示解决办法）

下一篇：云锁服务器怎么设置安全（SugarHosts云服务器如何开启访问端口和使用安全组）

您可能感兴趣

canvas如何调试（关于canvas.toDataURL 在iOS运行失败的问题解决）

canvas如何调试

热门推荐

排行榜