Html网页DIV截图功能

为什么80%的码农都做不了架构师？>>>   

需求及前提：

(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了，少了前一步的转换，清晰度不错，就是只能导出组件自身的图表。

 

 

转载于:https://my.oschina.net/jrrx/blog/714410