前端截长屏功能

2021-12-16 11:04:45 阅读：134 来源： 互联网

标签：功能截长前端 canvas html2canvas loading Canvas2Image document

使用 npm包 js_screen_shots 可以实现前端截长屏功能，这个包集成了两个方法 html2canvas 和 Canvas2Image

先使用把页面转成 canvas，然后 Canvas2Image 把转后的 canvas作为图片下载

import all from 'js_screen_shots'
 
all.html2canvas(document.getElementsByTagName('body')[0]).then(canvas => {
  all.Canvas2Image.saveAsPNG(canvas)
  loading.close()
});

对于有最大高度的模块，可以在 html2canvas 之前把高设置为 'auto'，下载后再还原、以下是我项目中的代码

import all from 'js_screen_shots'
import { ElLoading } from 'element-plus'
export default {
  setup(props) {
    //导出长屏方法
    function capturePage() {
      const loading = ElLoading.service({
        lock: false,
        text: '导出中...',
      })
 
      document.getElementsByClassName('el-main')[0].style.height = 'auto'
      all.html2canvas(document.getElementsByTagName('body')[0], {
        allowTaint: true,
        useCORS: true
      }).then(canvas => {
        // document.body.prepend(canvas)
        all.Canvas2Image.saveAsPNG(canvas)
        document.getElementsByClassName('el-main')[0].style.height = ''
        loading.close()
      });
    }
    return { capturePage }
  }
}

PS:如果脱离于项目，可以使用一下方法截长图：

方法一：GoFullPage谷歌插件
方法二：或者其他工具来截图
方法三：使用谷歌浏览器控制台（F12打开控制台,Ctrl+Shift+P 输入 screenshot，选择Capture full size screenshot即可），

标签：功能,截长,前端,canvas,html2canvas,loading,Canvas2Image,document
来源： https://www.cnblogs.com/geekfeier/p/15696851.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端截长屏功能