html2canvas官网：
GitHub：

使用html2canvas

安装依赖：

  1. yarn add html2canvas

在Vue中的使用示例：

  1. <template>
  2.   <div class="canvas-app">
  3.     <!-- canvas原内容 -->
  4.     <div class="canvas-content">
  5.       <div class="canvas-content-text">这是文本内容</div>
  6.     </div>
  8.     <!-- 按钮 -->
  9.     <div class="canvas-btns">
  10.       <div @click="generatorCanvas">生成海报</div>
  11.     </div>
  13.     <!-- canvas生成弹窗 -->
  14.     <div class="canvas-wrap">
  15.       <div class="canvas-wrap-img">
  16.         <img :src="imgUrl" alt="">
  17.       </div>
  18.       <div class="canvas-wrap-content"></div>
  19.     </div>
  20.   </div>
  21. </template>
  23. <script>
  24.   import html2canvas from 'html2canvas';
  25.   export default {
  26.     data() {
  27.       return {
  28.         imgUrl: ''
  29.       }
  30.     },
  31.     methods: {
  32.       generatorCanvas() {
  33.         let ele = document.querySelector('.canvas-content')
  34.         html2canvas(ele, {
  35.           backgroundColor: "#ffffff",
  36.           allowTaint: true,  //开启跨域
  37.           useCORS: true,
  38.           scrollY: 0,
  39.           scrollX: 0,
  40.         }).then(canvas => {
  41.           let wrap = document.querySelector('.canvas-wrap-content')
  42.           wrap.appendChild(canvas);
  43.           this.imgUrl = canvas.toDataURL('image/png');
  44.           // debugger
  45.         });
  46.       }
  47.     }
  48.   };
  49. </script>
  51. <style>
  52.   .canvas-content {
  53.     height: 50px;
  54.     background-color: #0f0;
  55.   }
  56.   .canvas-content-text {
  57.     color: red;
  58.   }
  59. </style>

生成后的DOM结构：
Snipaste_2022-04-14_09-54-02.png

图片跨域问题

如果是同源的图片路径，像这种，生成海报图片是正常的：

  1. <div class="canvas-content">
  2.   <div class="canvas-content-text">这是文本内容</div>
  3.   <div>
  4.     <img src="/favicon.png" width="100" height="100" alt="">
  5.   </div>
  6. </div>

如果是非同源的图片路径，生成海报将报错：

  1. <div class="canvas-content">
  2.   <div class="canvas-content-text">这是文本内容</div>
  3.   <div>
  4.     <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">
  5.   </div>
  6. </div>

点击“生成海报”报跨域问题：
Snipaste_2022-04-14_10-12-43.png

解决方案有两种，都需要服务端支持。

方法一：服务器设置静态资源响应头 Access-Control-Allow-Origin为 *或者域名白名单，然后在img标签添加crossorigin="anonymous"属性。

  1. <img crossorigin=“anonymous” src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">

方法二：使用代理服务器获取资源。参考：

参考资料