现在位置: 首页 > 博客文章 > 电脑相关 > IT开发 > 开发语言 > Web > 正文
用JavaSctipt保存div中的内容为图片
2016年11月21日 14:19:53 Web ⁄ 共 1043字 暂无评论 ⁄ 被围观 2,805次

在开发报表导出等项目模块时,常常需要把浏览器中看到的图表等保存为图片,方法很多,这里主要说说如何用 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!

给我留言

留言无头像?