Use html2canvas to convert the page into an image and download it using canvas2image

I previously found a method to download using the download attribute of <a> on the Internet. It is indeed very simple and convenient, but this method does not support IE, so I had no choice but to find another method.

The version used in this example:

• [email protected]
• [email protected]

Install

 npm install html2canvas canvas2image --save

introduce

 import html2canvas from 'html2canvas';require('./canvas2image.js');

canvas2image.js needs to be modified so that it can be tied to window

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

_dataURL can be used to echo, Canvas2Image.saveAsPNG(canvas) will download it directly.

Canvas2Image provides the following methods:

 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)

In vue, you can use $refs to determine the DOM;

backgroundColor: null, this sentence can make the transferred image without white edges

 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) }); },

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.