mk-screencapture

    1.0.0 • Public • Published

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

    1. 增加图片跨域功能 (1.0.0 版本及以后)

    2. 增加视频截图功能 (1.0.0版本以后)

    使用


    1. 安装

      npm i screencapture -S
    

    2. 组件内使用

      import screenCapture from 'mk-screencapture'
    
       screenCapture(
        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

    Install

    npm i mk-screencapture

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    336 kB

    Total Files

    4

    Last publish

    Collaborators

    • zboy