如何使用html2canvas将页面转成图并使用canvas2image下载

这篇文章主要介绍如何使用html2canvas将页面转成图并使用canvas2image下载，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

使用html2canvas将页面转成图，用canvas2image下载

本例使用的版本：

• html2canvas@1.0.0-alpha.12

• canvas2image@1.0.5

安装

npminstallhtml2canvascanvas2image--save

引入

importhtml2canvasfrom'html2canvas';
require('./canvas2image.js');

canvas2image.js 需要改动一下，以便绑在window上

(function($){
Canvas2Image=function(){
...
}
}

_dataURL 可以用来回显，Canvas2Image.saveAsPNG(canvas) 会直接下载。

Canvas2Image提供了下面几种方法:

Canvas2Image.saveAsImage(canvasObj,width,height,type)
Canvas2Image.saveAsPNG(canvasObj,width,height)
Canvas2Image.saveAsJPEG(canvasObj,width,height)
Canvas2Image.saveAsGIF(canvasObj,width,height)
Canvas2Image.saveAsBMP(canvasObj,width,height)

Canvas2Image.convertToImage(canvasObj,width,height,type)
Canvas2Image.convertToPNG(canvasObj,width,height)
Canvas2Image.convertToJPEG(canvasObj,width,height)
Canvas2Image.convertToGIF(canvasObj,width,height)
Canvas2Image.convertToBMP(canvasObj,width,height)

在vue中可以用$refs 确定DOM；

backgroundColor: null，此句可使转出的图没有白边

methods:{
toImage(){
let_this=this;
html2canvas(this.$refs.index,{
backgroundColor:null
}).then((canvas)=>{
let_dataURL=canvas.toDataURL("image/png");
//_this.dataURL=_dataURL;
Canvas2Image.saveAsPNG(canvas)
});
},

以上是“如何使用html2canvas将页面转成图并使用canvas2image下载”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！