vue使用html2canvas截图并将图片传给后台

最新推荐文章于 2023-11-21 14:19:52 发布

原创最新推荐文章于 2023-11-21 14:19:52 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端截图 #js #html2canvas

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文档介绍了如何在Vue项目中利用html2canvas库进行网页截屏操作。首先通过npm安装html2canvas，然后在Vue组件中引入并使用。设定要截图的div ID，并编写截图方法，该方法将截取的图片以img元素形式显示，并可下载或上传到后台。详细步骤及代码示例可供参考。

在项目中遇到这方面的需求，参考https://blog.youkuaiyun.com/qq_37600506/article/details/105415753实现的，自己也整理下备忘。

1、首先执行npm install --save html2canvas来进行安装，如果执行过程中有error导致执行不成功，可尝试将npm和node都升级后再执行；

2、执行成功后在vue页面引用，import html2canvas from 'html2canvas'；

3、将要截图的DIV设置ID，截图时通过ID来定位；

4、编写截图方法，在需要执行截图的地方调用即可。

 getImg(){
   html2canvas(
     document.getElementById('xxx'),
     {
       backgroundColor:null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
       useCORS: true,//支持图片跨域
       scale:1,//设置放大的倍数
     }
   ).then(canvas => {
     //截图用img元素承装，显示在页面的上
     let img = new Image();
     img.src = canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
     document.getElementById('yyy').appendChild(img);
 
     //如果你需要下载截图，可以使用a标签进行下载
     let a = document.createElement('a');
     a.href = canvas.toDataURL('image/jpeg');
     a.download = 'pic';
     a.click();

     //如果需要将图传入后台
     参数 = canvas.toDataURL('image/jpeg');//参数里存储的是图片的BASE64码
   })
 }
}

更多详细内容可参照官网：http://html2canvas.hertzen.com/