canvas图片跨域怎么解决

在把canvas画出来的图转成图片是报下面的错:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

应该是跨域的问题吧;
加上:image.setAttribute('crossOrigin', 'anonymous');也没用,

要怎么解决的好嘞?
阅读 2.6k
评论
    2 个回答
    评论 赞赏

      如果不想修改图片服务器的设置 可以用下面这种做法

      以php为例
      先用php加载图片 然后转换成base64编码 用来给img标签的src使用
      这样canvas加载img就不会有跨域的问题了

      php

      private function imgToBase64($img_url) {
              $imageInfo = getimagesize($img_url);
              $bae64 = chunk_split(base64_encode(file_get_contents($img_url)));
              $encode = 'data:'.$imageInfo['mime'] .';base64,' . $bae64;
              return $encode;
          }

      html

      <img id='img' src='<?= $encode; ?>'>

      js

      let img = document.getElementById('img');
      ctx.drawImage(img)
      评论 赞赏
        撰写回答

        登录后参与交流、获取后续更新提醒