html2canvas加上canvas2image保存网页为图片

html2canvas可以通过纯JS对浏览器端进行截屏，但截图的精确度还有待提高，部分css不可识别，所以在canvas中不能完美呈现原画面样式

插件地址

• 官方网站：html2canvas

• Github：html2canvas

  这里有个坑，不要下载最高版本的js，有很多坑。我从1.0降下来了。我用的是0.5版本的

• 这个是我在用的0.5版本: html2canvas.min.js

• 这个是我已经做好了，下载过去参考参考html2canvas加上canvas2image保存网页为图片

版本号

在介绍这个插件前先科普一下软件的版本号.

• Alpha：是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试人员使用。
• Beta：也是测试版，这个阶段的版本会一直加入新的功能。在Alpha版之后推出。
• α、β、λ常用来表示软件测试过程中的三个阶段，α是第一阶段，一般只供内部测试使用；β是第二个阶段，已经消除了软件中大部分的不完善之处，但仍有可能还存在缺陷和漏洞，一般只提供给特定的用户群来测试使用；λ是第三个阶段，此时产品已经相当成熟，只需在个别地方再做进一步的优化处理即可上市发行。

支持的浏览器

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

贴上代码

html代码结构

<h2 onclick="aa();">点击复制图片</h2>
<h2 onclick="bb();">点击下载图片</h2>



<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
    <img src="abc.jpg" width="200" height="200"><!-- 图片只能放在当前服务器才能用 -->
</div>

js代码结构

function aa(){

	html2canvas(document.getElementById('capture'), {
        onrendered: function(canvas) {
       		canvas.setAttribute('id','thecanvas');	//添加属性
            document.body.appendChild(canvas);
        },
        background: "#ffffff",		//canvas的背景颜色，如果没有设定默认透明
        logging: true,		//在console.log()中输出信息
    	width: 300,			//图片宽
		height: 300,		//图片高
        useCORS: true， // 【重要】开启跨域配置
    });
}
	 
function bb(){
	var oCanvas = document.getElementById("thecanvas");

	/* 参考
	Canvas2Image.saveAsPNG(oCanvas);  // 这将会提示用户保存PNG图片
	Canvas2Image.saveAsJPEG(oCanvas); // 这将会提示用户保存JPG图片
	Canvas2Image.saveAsBMP(oCanvas);  // 这将会提示用户保存BMP图片
	// 返回一个包含PNG图片的<img>元素
	var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);   
	// 返回一个包含JPG图片的<img>元素
	var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); 
	                                                       
	// 返回一个包含BMP图片的<img>元素
	var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); 
	 
	// 这些函数都可以接受高度和宽度的参数
	// 可以用来调整图片大小
	// 把画布保存成100x100的png格式
	Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);
	*/


	/*自动保存为png*/
	// 获取图片资源
	var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
	saveFile(img_data1, 'richer.png');
}


// 保存文件函数
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};

这个插件几点的坑

• 1、如果你截取的网页中有图片和文字，在本地测试时生成图片时，网页中的图片截取出来竟然是空白？

  （心里在想：什么狗屁插件根本不管用 图片都截取不了）
  原因：程序必须放在服务器下运行，不然的话网页中的图片是出不来的
  html2canvas 只能在服务器中抓取img

• 2、js的版本问题？

  这个版本必须要用稳定版的，不能用最高的版本，因为那应该是测试版。最好用稳定版的！
  用的版本不对的话，很多功可能用不了。