Vue 实现截图功能 (+ video 视屏截图) 并 下载

普通截图

1.下载 html2canvas 插件

cnpm install html2canvas --save

2. 引入

import html2canvas from 'html2canvas'

3. 使用

html 使用 ref 绑定 或者 id 绑定

 <div class="treeInfo"  id="player"   ref="canvas">
  <button size="mini">截图内容</button>
 </div>

js 方法

  canvaPhoto() {
      // 生成画布  // 不写也可以
      html2canvas(document.body).then((canvas) => {
        document.body.appendChild(canvas)
      })
      
      setTimeout(() => {  //延时可以防止图片内容没有加载完全
         // 生成图片
      html2canvas(this.$refs.canvas,   // 要截图的范围  //document.querySelector("#capture")
        {
      		useCORS: true  //跨域
        }
).then((canvas) => {   
        // 生成图片转换成 base64 格式
        var imgUrl = canvas.toDataURL('image/png')
        console.log(imgUrl)
      })
      }, 500);
    
    },

video 视屏截图 用js生成 canvas

html 使用 id 绑定

 <div class="treeInfo"  id="player"   ref="canvas">
 //添加个画布存放内容  // 好像不写也可以看具体情况
  <image class="banner-img" :src="url" crossOrigin="anonymous"></mage>
  <button size="mini">截图内容</button>
 </div>

js 方法

   // 截图
    canvaPhoto() {
      var player = document.getElementById('player')
      var video = player.childNodes[1]
      video.setAttribute('crossOrigin', 'anonymous')
      // console.log(video.clientWidth)
      var canvas = document.createElement('canvas')
      var img = document.createElement('img')
      canvas.width = video.clientWidth
      canvas.height = video.clientHeight
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
      var dataURL = canvas.toDataURL('image/png')
      // console.log(dataURL)
      img.src = dataURL
      img.width = video.clientWidth
      img.height = video.clientHeight 
      
     // 调用下载截图方法下载到本地...
      this.downFile(dataURL, '图片.jpg.jpg');
    },

下载截图到本地

 // 下载截图到本地
    downFile(data, fileName) {
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');   //有效的内部空间URI
      save_link.href = data;
      save_link.download = fileName;
      var event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
    },

有效的内部空间URI

HTML - 参见 http://www.w3.org/1999/xhtml
SVG - 参见 http://www.w3.org/2000/svg
XBL - 参见 http://www.mozilla.org/xbl
XUL - 参见 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul