html2canvas将指定element转成图片

使用html2canvas将指定element转成图片,可广泛用于生成宣传海报图，效果良好。。。

下面说明两种引入使用方式

1、依赖方式：

Install NPM：npm install --save html2canvas

Install Yarn：yarn add html2canvas

引入依赖：

import html2canvas from 'html2canvas';

2、javascript方式：

<script src="assets/js/html2canvas.min.js"></script>

declare var html2canvas

具体实现：

html:

<div id="minediv" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Test Img!</h4>
    <img src="本地图片/静态图片资源"  id="img1"/>
    <img src="网络图片资源"  id="img2"/>
</div>

ts:

 /**
   * 图片地址
   */
  canvasImg = "";
  createimg() {
    // 使用html2canvas插件，将数据源中的数据转换成画布。
    html2canvas(document.querySelector("#minediv"), { useCORS: true }).then(canvas => {
      // 修改生成的宽度,这个延时根据自己情况，感觉有必要
      setTimeout(() => {
        canvas.style.width = "600px";
        this.canvasImg = canvas.toDataURL("image/png");
        console.log("canvasImg ="+this.canvasImg );
      }, 1000);
    });
  }

**实际应用发现，网络图片资源在转换过程中会丢失，原因是资源域名不支持跨域访问，可以设置域名允许跨域访问，也可以将目标图片转换成BASE64格式，完美解决。。

 

html2canvas.min.js下载地址：https://download.csdn.net/download/qq_31828985/12531916