vue项目中使用html2canvas插件

一、生成海报图
vue项目中使用html2canvas插件，实现将编写的html代码转成可以保存的图片，只需要以下四步。

1、在vue项目中安装插件

npm i html2canvas

 

2、在需要使用到的页面引入html2canvas插件

import html2canvas from “html2canvas”;

 

3、按照设计图编写html代码

<div
          v-loading="loading"
          id="haibao_box"
          :class="loading ? 'noscroll' : ''"
          class="haibao_box noScrollBar"
        >
          <div id="poster">
            <img
              id="bgc"
              src="https://imgbdb4.bendibao.com/xcxbdb/20239/21/2023921132708_70332.png"
            />
            <div class="main">
              <div class="job_name">{{ jobInfo.name }}</div>
              <div class="detail">{{ jobInfo.content }}</div>
              <div class="footer">
                <img
                  src="https://imgbdb4.bendibao.com/xcxbdb/20239/21/2023921140905_78679.png"
                  id="code"
                />
                <img
                  id="code_bg"
                  src="https://imgbdb4.bendibao.com/xcxbdb/20239/21/2023921132740_17597.png"
                />
              </div>
            </div>
          </div>
        </div>

4、生成海报图

 

async getHaibao() {
   let htmlDom = document.getElementById("poster");
   let that = this;
   html2canvas(htmlDom, {
      allowTaint: true,
      useCORS: true,
      scrollY: 0,
      scrollX: 0,
    }).then(function (canvas) {
         let haibaoBox = document.getElementById("haibao_box");
         canvas.setAttribute("id", "canvas"); //给我们的海报画布一个id值，后面一键赋值用到
         haibaoBox.appendChild(canvas); //新增到页面相应的位置
          htmlDom.style.display = "none"; //将我们的html代码隐藏
         that.loading = false;
    });
}

 

二、一键复制到剪切板
1、需要安装b64-to-blob

npm i b64-to-blob --save

2、具体使用

//页面中引入b64toBlob
import b64toBlob from “b64-to-blob”;

 

给一个按钮绑定这个点击事件即可

copyCanvasImage() {
    // 获取canvas元素
    let canvas = document.getElementById("canvas");
    let imageData = canvas.toDataURL();
    let str = imageData.replace(/data:image\/png;base64,/, "");
    let file = b64toBlob(str, "image/png");
    let clipboardItemInput = new window.ClipboardItem({
        "image/png": file,
     });
    window.navigator.clipboard.write([clipboardItemInput]);
},

 

可能遇到的问题参考：

1.js 把图片url转化成base64

2.html2canvas （踩坑） 网络图片显示不出来&生成图片只有一半或者空白&文字显示不出来问题处理