Html2canvas在Vue中的使用

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

截图

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

                    

使用说明

1、引入 JS 文件

---

或者使用 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的内容可以改成你需要的

            

                

                    

                        {{currentTime}}
                    
                    

                        
                        
                        4G
                         100%
                    
                
                

                    
                    {{chatroomDetail.noSpanName}}({{chatroomDetail.memberCount}})
                

            
            

                

                    
                
            
            

                

                    
                
                
                

                    
                    
                
            

        

下载操作

下载

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)

      }