js实现截图并保存图片（html转canvas、canvas转image）

js实现截图并保存图片在本地（html转canvas、canvas转image）

一、html转canvas

需要的库html2canvas.js和canvas2image.js

话不多说，直接上代码！

html

原始HTML

    

        

            

                

                    33333333333333333333333333333333
                
            

        

    

  转成canvas 
 转成图片 

    宽度:
    
    高度:
    
    文件名:
    
    
                png
                jpeg
                bmp
            
    保存

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