运用插件html2canvas浏览器截屏的方法

最新推荐文章于 2024-07-26 11:41:15 发布

写bug啦啦啦

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量559

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_47481630/article/details/129753401

版权

运用插件html2canvas浏览器截屏的方法
首先先安装 html2canvas 插件

toIMage() {
         // 获取dom元素
         let canvasBox = this.imageToFileRef;
         const canvas = document.createElement("canvas");
         //获取父级的宽高
         const width = parseInt(window.getComputedStyle(canvasBox).width);
         const height = parseInt(window.getComputedStyle(canvasBox).height);
         //宽高 *2 并放大两倍 是为了防止图片模糊
         canvas.width = width * 2;
          canvas.height = height * 2;
          canvas.style.width = width  + "px"
           canvas.style.height = height  + "px"
           const context = canvas.getContext('2d')
            context.scale(2,2)
            const canvasResult =  html2canvas(canvasBox,{allowTaint:true})
            const capture = canvasResult.toDataURL('image/png')
            //下载浏览器弹出下载信息的属性
            const saveInfo = {
             //导出文件格式自己定义，我这里用的是时间作为文件名
             download:`截图.png`,
             href:capture
            }
           //下载,浏览器弹出文件下载提示
            this.downloadFile(saveInfo)
       },

然后就直接可以截图了。。。

在这里插入图片描述
记得把这个属性设置为true;;不然下载的图片是黑屏。。。。