Html2canvas在Vue中的使用

html转canvas，可用于截图（附官网链接：http://html2canvas.hertzen.com/）

截图

（仿写了一个微信聊天界面φ(>ω<*) ）     

                    

使用说明

1、引入 JS 文件

---

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

或者使用 npm 安装

npm install html2canvas

vue 中使用的话，npm 安装后需要在使用界面引入

import html2canvas from 'html2canvas'

2、使用案例

---

本案例是用于vue3.0+typescript

html

这里需要说明的 一点是，我没有通过getElementById来获取节点，因为在typescript标准下，js获取节点的方式会编译不通过，所以使用了vue的ref，获取的时候使用 const _canvas: any = _this.$refs.cutScreen as HTMLElement;

类名为screen_subject的内容可以改成你需要的

<div class="screen_subject" ref="cutScreen">
            <div class="screen_header">
                <div class="title">
                    <div class="real_time">
                        <span>{{currentTime}}</span>
                    </div>
                    <div class="signal">
                        <i class="symbol fa fa-bluetooth-b" aria-hidden="true"></i>
                        <i class="symbol fa fa-signal" aria-hidden="true"></i>
                        <span class="symbol">4G</span>
                        <span class="symbol"><i class="fa fa-battery-full" aria-hidden="true"></i> 100%</span>
                    </div>
                </div>
                <div class="chatroom_name">
                    <i class="el-icon-arrow-left"></i>
                    <span>{{chatroomDetail.noSpanName}}(<b>{{chatroomDetail.memberCount}}</b>)</span>
                </div>

            </div>
            <div class="msg_sub">
                <div class="msg_view" v-for = "msg in messages" :key="msg.msgId">
                    <screen-message :message="msg" :tagetMsgId="msgId"/>
                </div>
            </div>
            <div class="editor">
                <div class="editor_tools left">
                    <img src="../../../../assets/image/audio-icon.png" alt="">
                </div>
                <span class="input_line"></span>
                <div class="editor_tools right">
                    <img src="../../../../assets/image/emoji.png" alt="">
                    <img src="../../../../assets/image/expand.png" alt="">
                </div>
            </div>

        </div>

下载操作

<a :href="screenUrl" class="down" download="下载">下载</a>

js

这里是生成截图后，利用a标签的download属性直接从浏览器端下载图片（注：跨域的图片是截不到的哦）

private doScreeenShots() {
          const _this = this
          setTimeout(() => {
               // 创建一个新的canvas
              const _canvas: any = _this.$refs.cutScreen as HTMLElement;
             // 此处用于解决截图不清晰问题，将生成的canvas放大，然后再填充到原有的容器中就会清晰
              const width = _canvas.offsetWidth; 
              const height = _canvas.offsetHeight; 
              const canvas2 = document.createElement('canvas');
              const scale = 2;
              canvas2.width = width * scale;
              canvas2.height = height * scale;
              const context1 = canvas2.getContext('2d')
              if(context1) {
                context1.scale(scale, scale);
              }
              const opts = {
                    scale,
                    canvas: canvas2,
                    // logging: true, //日志开关，便于查看html2canvas的内部执行流程
                    width,
                    height,
                    // 【重要】开启跨域配置
                    useCORS: true 
                };
              html2canvas(_canvas,opts).then((canvas) => {
                  const context = canvas2.getContext('2d');
                  if(context) {
                      context.scale(2,2);
                      context.mozImageSmoothingEnabled = false;
                      context.webkitImageSmoothingEnabled = false;
                      context.imageSmoothingEnabled = false;
                  }
                  // canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
                  _this.screenUrl = canvas.toDataURL()
              });
          },1000)

      }