使用html2canvas，由html转换canvas时，出现图片丢失问题解决方案

在img标签上加上crossorigin=“anonymous”；
如果是图片地址是跨域网址，请将图片转换为base64格式；

源码如下：

<!DOCTYPE html>
>
  >
    ="utf-8" />
    -equiv="X-UA-Compatible" content="IE=edge" />
    >html2canvas example</title>
  </head>

  >
    
="view">
      ="button" value="截图" onclick="takeScreenshot()" />
      =""
        alt=""
        crossorigin="anonymous"
        class="imgs"
      />
      ="myCanvas"></canvas>
    </div>
  </body>
  <script src="https://unpkg.com/html2canvas@1.0.0-rc.7/dist/html2canvas.js"></script>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 80, 100);
    function takeScreenshot() {
      html2canvas(document.querySelector("#view")).then((canvas) => {
        document.body.appendChild(canvas);
      });
    }
    getBase64Image('https://profile.csdnimg.cn/B/1/0/3_qq_39045645',document.querySelector('.imgs'));
    
    function getBase64Image(url, ref) {
      var image = new Image();
      image.src = url + "?v=" + Math.random(); // 处理缓存
      image.crossOrigin = "*"; // 支持跨域图片
      image.onload = function () {
        var base64 = drawBase64Image(image);
        ref.src = base64;
      };
    }

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119945845

前端高级htmlcanvas

相关

html标签

HTML和CSS

canvas 基础教程

HTML表单

HTML5新增

Jmeter+ant实现自动生成基于HTML报告及自动发送邮件

Python 发送HTML格式的邮件

shell 拼接html table 发送邮件

html入门-狂神学java

SAP导出报表格式XXl、XML、XLSX、MHTML选择

HTML5手机APP开发入门(2)

https://m.php.cn/vuejs/464077.html

标签