html2canvas用法、高清显示图片

首先附上html2canvas github地址：https://github.com/niklasvh/html2canvas

这个插件的作用就是利用js进行页面截图，在实际操作之前先了解下官方文档：

官方简介：

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

这个脚本允许你在用户浏览器上直接对网页或部分内容进行“截图”。屏幕截图是基于DOM的，因此它可能不是100%的精确到真实的表示，因为它不做实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。

The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.

脚本通过读取DOM和应用于元素的不同样式，将当前页面渲染成一个canvas图片。

---

html2canvas的局限性：

在没有代理的情况下，页面中的图片不能跨域；

对一些CSS属性支持并不是很好；

不支持flash和iframe标签；

使用方法：

新版使用：          

html2canvas(document.body, options).then(function(canvas){

              document.body.appendChild(canvas);          

});        

旧版使用：          

html2canvas(document.body, {

              onrenderd: function(canvas{

                  document.body.appendChild(canvas);              

                },

              width: xx,

               ... // other options

 });  

可配置参数：

实现：

functionscreenshot(id,evt,option){

    functionshotCb(){

        option=option||{};

        event.preventDefault();

        var width=document.body.clientWidth;

        var height=document.body.clientHeight;

        html2canvas(document.body, {

            width:option.width||width,

            height:option.height||height,

            onrendered:function(canvas) {

                //生成base64图片数据

                var dataUrl=canvas.toDataURL();

                // document.body.innerHTML="";

                var newImg=document.createElement("img");

                newImg.src=dataUrl;

                document.body.appendChild(newImg);

            }

        });

    }

    document.getElementById(id).addEventListener(evt,function(event) {

        shotCb();

    });

}

screenshot("btn","click");

效果：

图1

问题点：

    图1中上半部分为DOM截图，下半部分为生成的图片，可以明显的看出来图片变得模糊了，所以接下来我们要解决图片显示高清的问题。

高清显示图片：

添加的代码如加粗部分

function shotCb(){

    option=option||{};

    event.preventDefault();

    var width=document.body.clientWidth;

    var height=document.body.clientHeight;

    //要将 canvas 的宽高设置成容器宽高的 2 倍

    var canvas=document.createElement("canvas");

    canvas.width=width*2;

    canvas.height=height*2;

    canvas.style.width=width+"px";

    canvas.style.height=height+"px";

    var context=canvas.getContext("2d");

    //然后将画布缩放，将图像放大两倍画到画布上

    context.scale(2,2);

    html2canvas(document.body, {

        width:option.width||width,

        height:option.height||height,

        canvas:canvas,

        onrendered:function(canvas) {

        //生成base64图片数据

            var dataUrl=canvas.toDataURL();

            var newImg=document.createElement("img");

            newImg.src=dataUrl;

            newImg.width=this.width;

            newImg.height=this.height;

            document.body.appendChild(newImg);

        }

    });

}

效果：

在改动之后，生成的图片变得和原先页面中显示的一样清晰了。原理是，在我们画这张图片的时候，将canvas画布翻倍，画的内容也就翻倍了，这样生成的图片就是基础生成图片的2倍图，这样就会变得清晰了。

在实际项目中应用时，由于公司静态资源都会放在不同的服务器，导致产生跨域问题，图片无法显示出来，这时候，插件提供的各种参数就派上用场了，例如公司在设置图片时，设置了Access-Control-Allow-Origin，这样图片就可以跨域请求了，然后我们只要将插件的useCORS设置为true，这样，跨域的图片就可以进行截图了。