需求及前提： (1) 将web网页展示的某些图表，导出为图片保存； (2) 图表可能是Canvas的（使用H5绘图组件生成的或者自己Draw的），也可能是div组合出来的； 方案1： 使用html2
需求及前提：
(1) 将web网页展示的某些图表，导出为图片保存；
(2) 图表可能是Canvas的（使用H5绘图组件生成的或者自己Draw的），也可能是div组合出来的；
方案1：
使用html2canvas(某些浏览器需要引入依赖es6-promise.min.js,因为木有Promise对象)
https://github.com/niklasvh/html2canvas
https://github.com/stefanpenner/es6-promise
和 canvas2image
https://github.com/hongru/canvas2image/blob/master/canvas2image.js
示例：
$("#snap_btn_001").on("click",function(event){
event.preventDefault();
var w = $("#id001").width();
var h = $("#id001").height();
//这一坨代码是为了解决截图不清晰的问题，但是ratio应该根据浏览器的分辨率计算，这里先写死的一个数值
var ratio = 2;
//要将 canvas 的宽高设置成容器宽高的 Ratio 倍
var canvas = document.createElement("canvas");
canvas.id = "mycanvas";
canvas.width = w * ratio;
canvas.height = h * ratio;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
var context = canvas.getContext("2d");
//然后将画布缩放，将图像放大ratio倍画到画布上
context.scale(ratio,ratio);
html2canvas(document.getElementById("id001"),{
allowTaint: true,
taintTest: false,
width: w,
height:h,
onrendered: function(canvas) {
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
//newImg.style = "display:none;"; //如果要导出，这儿可以隐藏，然后用canvas2image搞定
newImg.src = dataUrl;
document.body.appendChild(newImg);
}
});
});
参考文章：
http://web.jobbole.com/86353/
http://blog.csdn.net/fengyao1995/article/details/51842486
方案2：
对于使用H5绘图组件的，多数组件本身提供了导出为图片的方法，调用或者配置即可。
例如echarts js 的saveAsImgae配置。
方案1和2对比：
(1) 方案1 使用范围广，如果图表包含了自定义的div，也能截图导出，但是清晰度有问题（根源是啥，需要研究html2canvas源码，我没研究，但是我相信可以解决。）
(2) 方案2，使用组件自身的导出，由于本身就是canvas了，少了前一步的转换，清晰度不错，就是只能导出组件自身的图表。
