js实现截图并保存图片(html转canvas、canvas转image)

js实现截图并保存图片在本地(html转canvas、canvas转image)
一、html转canvas
需要的库html2canvas.js和canvas2image.js
话不多说,直接上代码!

html

原始HTML

33333333333333333333333333333333

转成canvas

转成图片








css

js



代码都有详细的注释,就不一一介绍了。
下面来看看效果:

首先原始HTML里面的内容是需要截图的:

点击转成canvas:

可以看见此时增加一个一个canvas标签:

点击转成图片:

可以看见此时增加一个一个img标签:

点击保存:

至此,js截图就做完了。

html2canvas.js和canvas2image.js的下载地址:
html2canvas.js:http://html2canvas.hertzen.com/dist/html2canvas.min.js
canvas2image.js:https://github.com/SuperAL/canvas2image
github
新博客地址:http://www.caomage.com

发表评论