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

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]);
},

可能遇到的问题和对应的博客

图片不显示
https://blog.csdn.net/Andrexc/article/details/111085410?ops_request_misc=&request_id=&biz_id=102&utm_term=html2canvas%E5%9B%BE%E7%89%87%E4%B8%8D%E6%98%BE%E7%A4%BA&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-6-111085410.nonecase&spm=1018.2226.3001.4187

https://blog.csdn.net/qq_32898041/article/details/87907668?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%B0%86%E5%9B%BE%E7%89%87url%E8%BD%AC%E6%88%90base64&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-3-87907668.142^v94chatsearchT3_1&spm=1018.2226.3001.4187