郎行天下

用JavaSctipt保存div中的内容为图片

在开发报表导出等项目模块时，常常需要把浏览器中看到的图表等保存为图片，方法很多，这里主要说说如何用 JS 来保存图片。

方法一：用插件 html2canvas 和 canvas2image。

从网上下载插件 html2canvas 插件，也可以在这里下载。

下载后放入到项目中，在需要导出图片的页面中引入 html2canvas.js 和 canvas2image.js。

保存方法：

Code   ViewCopyPrint

1. html2canvas($("#id_div"), {


2.     onrendered: function(canvas) {


3.         Canvas2Image.saveAsPNG(canvas, 300, 200);


4.     }


5. });

如果发生如下错误：

Uncaught ReferenceError: html2canvas is not defined(…)

说明引入插件太晚，需要把引入的 js 向前挪，让其插件先引入，再引入画面中的其它插件即可。

canvas2image.js 中还有一些其它保存及转换方法，按照自己的需求选择即可，详细如下：

Code   ViewCopyPrint

1. // 保存图片


2. Canvas2Image.saveAsImage(canvasObj, width, height, type)


3. Canvas2Image.saveAsPNG(canvasObj, width, height)


4. Canvas2Image.saveAsJPEG(canvasObj, width, height)


5. Canvas2Image.saveAsGIF(canvasObj, width, height)


6. Canvas2Image.saveAsBMP(canvasObj, width, height)



7. // 转换图片


8. Canvas2Image.convertToImage(canvasObj, width, height, type)


9. Canvas2Image.convertToPNG(canvasObj, width, height)


10. Canvas2Image.convertToJPEG(canvasObj, width, height)


11. Canvas2Image.convertToGIF(canvasObj, width, height)


12. Canvas2Image.convertToBMP(canvasObj, width, height)

 

其它方法，待补充。。。

Good Luck！