菜单

高清展现图片澳门太阳集团

2020年3月18日 - 新闻中心
高清展现图片澳门太阳集团

现象描述

率先附上html2canvas github地址:

相符大小的图形用canvas和DOM绘制,结果开掘canvas的画面质量要差超多。结果如下图所示。

其一插件的功用正是利用js举办页面截图,在实操以前先理解下官方文书档案:

上海体育场合中,右侧红框中的金币采取DOM绘制,侧边和下方的金币和文字等利用canvas绘制,结果canvas绘制的图形模糊不清。

官方简单介绍:

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标签;

借使dpr = 2;图片大小为60x60px;对dpr有一定的打听功底。

动用方法:

新版使用:          

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

 });  

1.DOM显示图片进程

可配备参数:

澳门太阳集团 1

图片——》浏览器css像素——》荧屏实际像素

实现:

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”);

60×60 30×30 60×60

效果:

澳门太阳集团 2

图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);

        }

    });

}

2.canvas制图进程

效果:

澳门太阳集团 3

在改变之后,生成的图样变得和原本页面中显示的相像清晰了。原理是,在大家画那张图片的时候,将canvas画布翻倍,画的内容也就翻倍了,那样生成的图纸正是根底生成图片的2倍图,那样就能够变得一清二楚了。

在实质上项目中使用时,由于集团静态财富都会放在不一致的服务器,引致发生跨域难题,图片不能展现出来,这时,插件提供的各个参数就派上用处了,举个例子公司在装置图片时,设置了Access-Control-Allow-Origin,这样图片就能够跨域诉求了,然后大家只要将插件的useCORAV4S设置为true,那样,跨域的图片就足以拓宽截图了。

图形像素——》canvas像素——》显示屏实际像素

60×60 30×30 30×30 60×60

图表像素——》画布像素——》实际像素

也便是说,canvas的绘图进度中图纸到画布的经过中开展了像素的抽稀,画布到荧屏像素时又扩充了插值,所以变成图片品质下落。

消除方案

推广画布的尺寸,可是canvas突显尺寸不改变;

图片像素——》canvas像素——》显示器实际像素

60×60 60×60 30×30 60×60

图片像素——》实际像素

而canvas的规划的时候恰巧有对象的属性来分别管理画布尺寸和呈现尺寸;canvas的width、height属性用于管理画布尺寸;canvas的style属性中的width、height适逢其会是彰显尺寸。

也正是说应用方案就是设置舞台的尺码和图纸像素的尺码一致,显示尺寸为常规显示尺寸;假如canvas的显示尺寸为窗口宽度,创造canvas的时候钦定canvas的width属性为2
* body.clientHeight;style.widht为body.clientHeight + ‘px’;

如上正是本文的全部内容,希望本文的从头到尾的经过对大家的求学可能专门的学业能拉动一定的扶助,同期也期望多多指教脚本之家!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图