web-jietu 网页截图工具

该插件用来做网页内截图，是对 html2canvas.js 的升级

增加图片跨域功能

增加视频截图功能

使用

1. 安装

  npm i web-jietu -S

2. 组件内使用

  import Jietu from 'web-jietu'

   Jietu(
    ele,
    {
      useCORS: true, // 允许图片跨域
    }).then(function (canvas) {
      const _baseImg = canvas.toDataURL()  // 转base64
      // do next
    })

3. 视频引用时自动生成首屏截图

  function setVideoPoster(videoEle) {
    videoEle.addEventListener('loadeddata',()=>{  // javascript
      // $(videoEle).on('loadeddata', () => { // jquery
      var canvas = document.createElement("canvas"); //canvas画布
      const size = getComputedStyle(videoEle)
      canvas.width = Number(size.width.replace('px', ''));
      canvas.height = Number(size.height.replace('px', ''));
      canvas.getContext('2d').drawImage(videoEle, 0, 0, canvas.width, canvas.height);
      videoEle.setAttribute("poster", canvas.toDataURL("image/png"));
    })
  }

4. 其他

其他配置请查看 html2canvas 官网

鸣谢

感谢 html2canvas.js