使用html2canvas将页面转成图

站长手记 作者: 2024-08-28 00:15:02
之前在网上找到一个用 的 download属性下载的方法,确实很简单也很方便,但此方法不支持IE,无奈又找到另一方法。使用html2canvas将页面转成图,用canvas2image下载

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

本例使用的版本:

html2canvas@1.0.0-alpha.12
canvas2image@1.0.5
npm install html2canvas canvas2image --save
import html2canvas from 'html2canvas';
require('./canvas2image.js');
(function($){
    Canvas2Image = function () {
    ...
    }
}
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)
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)
	    });
	},
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_69828.html
html canvas