js使用html2canvas实现页面截图并保存图片

最近在项目中碰到了一个需求是要求把当前页面当成图片下载到本地供首页banner图展示,当时看到需求,一直在找怎么把当前页面导成图片的方法,但是试了很多方法都没成功(原谅我还是很菜,哈哈),这时候在网上看到个帖子,类似是做屏幕截图,下载到本地,于是我找到了一个名叫 ‘html2canvas’ 的工具,试了之后,完美的实现了我想要的效果,用法也很简单:

1:先下载包:npm install html2canvas;

2:然后在页面中引入:import VueHtml2Canvas from \'vue-html2canvas\';     可以在当前用的页面引入,也可以全局在main.js中引入;

3:然后就可以在代码中使用了:

created() {
this.save();
},
methods:{
save() {
this.$html2canvas(this.$refs.image,{
backgroundColor: null
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
this.dataURL = dataURL;
});
}
}
这是一种写法,还可以用es6的语法

async save() { const el = this.$refs.image const options = { type: \'dataURL\', logging:false //关闭日志 }; this.dataURL = await this.$html2canvas(el,options) }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgwjww.html