使用html2canvas 截图出现图片空白的问题

最新推荐文章于 2023-08-31 17:40:07 发布

原创最新推荐文章于 2023-08-31 17:40:07 发布 · 3.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #javascript

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

本文探讨了在使用html2canvas库进行网页截图时遇到的图片空白问题，分析了可能的原因，如CSS样式不兼容、异步加载内容、隐藏元素等，并提供了解决方案，包括调整CSS设置、等待内容加载完成、处理隐藏元素等方法，帮助开发者成功实现网页截屏功能。

npm install html2canvas -S
//在要截图的页面里
import html2canvas from 'html2canvas' 

<div @click="saveImage()">截图</div>

 <div ref="ImageContent">
     要截图的内容
 </div>

saveImage() {
      let myBox = this.$refs.ImageContent;

      html2canvas(myBox, {
        useCORS: true,
        width: window.screen.availWidth,
        height: window.screen.availHeight,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight,
        x:0,
        y:window.pageYOffset
      }).then(function(canvas) {
        var dataUrl = canvas.toDataURL('image/jpeg', 1.0);//图片转为下载路径
        var a = document.createElement('a');//创建a标签

        a.href = dataUrl;
        a.download = '系统模块.png';//设置图片名称
        a.click();
      });
    },