CN105204853A

CN105204853A - 一种网页浏览器的Canvas绘图方法及装置

Info

Publication number: CN105204853A
Application number: CN201510583773.1A
Authority: CN
Inventors: 王瑄
Original assignee: Sina Technology China Co Ltd
Current assignee: Sina Technology China Co Ltd
Priority date: 2015-09-14
Filing date: 2015-09-14
Publication date: 2015-12-30

Abstract

本发明公开了网页浏览器的Canvas绘图方法及装置，可在标准显示设备和高清显示设备上均获得适用于本设备的最清晰成像效果，有效节约了存储空间和网络传输资源。网页浏览器的Canvas绘图方法，包括：根据设置的Canvas的指定尺寸初始化生成Canvas对象，并获取Canvas绘图上下文；获取DPR和Canvas绘图上下文的BSPR，根据获取到的DPR值与BSPR值二者之比，确定HDPR值；实例化Canvas对象，按照确定出的HDPR值对Canvas绘图上下文进行缩放，按照确定出的HDPR值对Canvas的指定尺寸进行缩放得到Canvas的实际尺寸用以承载绘图程序产生的图像数据，设定Canvas的指定尺寸用以页面内容排版；网页浏览器基于实例化的Canvas对象进行Canvas绘图。

Description

一种网页浏览器的Canvas绘图方法及装置

技术领域

本发明涉及图像处理技术领域，尤其涉及一种网页浏览器的Canvas绘图方法及装置。

背景技术

网页浏览器前端程控绘图的过程模仿了人类自然绘图的方式，简单描述为在一定的绘图空间(画布)内，将“画笔”反复在起点与终点间移动，由起点和终点所确定的无数个点、线、面的集合共同组成最终图像。

HTML5是HTML(HyperTextMarkupLanguage，超文本标记语言)最新的修订版本，2014年10月由W3C(万维网联盟)完成标准制定，目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS(层叠样式表)和JavaScript在内的一套技术组合，它希望能够减少网页浏览器对于RIA(Plug-in-BasedRichInternetApplication，需要插件的富互联网应用，例如AdobeFlash、MicrosoftSilverlight、OracleJavaFX等)的需求，并且提供更多能有效加强互联网应用的标准集。

Canvas(画布)是HTML5中新增的一个重要元素，专门用来绘制图像，在网页上放置一个Canvas元素，就相当于在网页上放置一块“画布”，可以在其中进行图像的描绘。HTML5的Canvas使用脚本(通常是JavaScript)在网页上绘制图像，在传统的标准分辨率显示设备(简称标准显示设备)上前端Canvas搭配JavaScript语言编写绘图代码涉及的每个像素与显示设备的最小显示单元一一对应，最终渲染输出的图像在此显示设备上可获得相对最清晰的效果。

现有技术中，标准显示设备获得更高分辨率的方式多为增大显示面积，以此获得更多空间用来显示更多内容，例如显示尺寸由19英寸提升到27英寸(显示尺寸是指显像管的可见部分的对角线尺寸，以英寸为单位)，最大分辨率也同时由1280×1024提升到1920×1080或更高。而在新兴的高清显示设备上，例如视网膜屏幕(分辨率超过人眼识别极限的高分辨率屏幕)、4K/5K屏幕等，更高的分辨率并不用来显示更多的内容，而是用来在同样面积显示相同内容时提升显示细腻度。

现有技术中，为了充分发挥此类高清显示设备的显示能力，需使用比标准显示设备上尺寸更大的图像。以采用视网膜屏幕的iPhone6为例进行说明，需将标准显示设备上显示正常的100×100像素的图像重新发布为200×200像素的图像；而在iPhone6Plus上，则需将图像放大至300×300像素才能获得最清晰的成像效果。

而对于没有进行放大处理的图像，例如在高清显示设备诞生之前已经发布的网页中所使用的绘图程序和图像，或是没有精力对高清显示设备提供支持的情况，高清显示设备所使用的软硬件系统将会自动向下兼容对图像进行处理后再渲染输出。高清显示设备的自动化处理算法通过将显示设备多个最小显示单元对应到原有图像的一个像素，视觉上将原有图像进行拉伸放大以保证在“占地面积”上表现正常从而保证既有网页内容排版显示无误。

本发明人在发明过程中发现，为了在高清显示设备上获得清晰的成像效果，同时又保证对既有标准显示设备的兼容，不得不对相同图像发布多个尺寸规格以进行适配，造成了存储空间的浪费以及网络传输数据量的增大。且由于图像是静态的，在需要由程序动态生成内容的场景中此方法会放大上述缺点造成的资源浪费且难以实施。而高清显示设备提供的自动化处理方案，借助支持高清显示设备的软硬件系统的兼容能力，在最终成像前自动对图像进行拉伸放大处理，但对位图图像的放大直接导致了模糊现象的产生。

发明内容

本发明实施例提供一种网页浏览器的Canvas绘图方法及装置，无需针对相同图像的不同尺寸规格进行二次或多次重复开发，即可在标准显示设备和高清显示设备上均获得适用于本设备的最清晰成像效果，从而有效节约了存储空间和网络传输资源。

本发明实施例提供的网页浏览器的Canvas绘图方法，包括：

根据设置的画布Canvas的指定尺寸初始化生成Canvas对象，并获取Canvas绘图上下文；

获取设备像素比DPR和Canvas绘图上下文的缓冲区像素比BSPR，根据获取到的DPR值与BSPR值二者之比，确定缩放比例参数HDPR值；

实例化Canvas对象，按照确定出的HDPR值对Canvas绘图上下文进行缩放，按照确定出的HDPR值对Canvas的指定尺寸进行缩放得到Canvas的实际尺寸用以承载绘图程序产生的图像数据，设定Canvas的指定尺寸用以页面内容排版；

网页浏览器基于实例化的Canvas对象进行Canvas绘图。

本发明实施例提供的网页浏览器的Canvas绘图装置，包括：

初始化单元，用于根据设置的画布Canvas的指定尺寸初始化生成Canvas对象，并获取Canvas绘图上下文；

获取单元，用于获取设备像素比DPR和Canvas绘图上下文的缓冲区像素比BSPR；

确定单元，用于根据获取到的DPR值与BSPR值二者之比，确定缩放比例参数HDPR值；

绘图环境准备单元，用于实例化Canvas对象，按照确定出的HDPR值对Canvas绘图上下文进行缩放，按照确定出的HDPR值对Canvas的指定尺寸进行缩放得到Canvas的实际尺寸用以承载绘图程序产生的图像数据，设定Canvas的指定尺寸用以页面内容排版。

本发明实施例提供的网页浏览器的Canvas绘图方法及装置，定义DPR与BSPR二者之比为缩放比例参数HDPR，使用自定义的Canvas绘图装置替换初始化时网页浏览器的原生Canvas对象，在绘图环境准备环节，按照确定出的HDPR值对Canvas绘图上下文进行缩放，按照确定出的HDPR值对Canvas的指定尺寸进行缩放得到Canvas的实际尺寸用以承载绘图程序产生的图像数据，设定Canvas的指定尺寸用以页面内容排版。针对高清显示设备来说，经过本方案处理的图像数据已经按照最终分辨率进行了适应性放大，缓冲区内图像数据满足放大后的成像要求，故最终显示效果清晰。整个实施过程无需对原有大量的绘图代码进行修改；初始化过程可在原有绘图程序进行绘图之前全部完成，无需对原有绘图程序的绘图逻辑做任何改变即可达到目的，实施简单快速。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例中网页浏览器的Canvas绘图方法流程图；

图2为本发明实施例中网页浏览器的Canvas绘图装置框图。

具体实施方式

本发明实施例旨在提供一种网页浏览器的Canvas绘图方法及装置，无需针对相同图像的不同尺寸规格进行二次或多次重复开发，即可在标准显示设备和高清显示设备上均获得适用于本设备的最清晰成像效果，从而有效节约了存储空间和网络传输资源。

以下结合说明书附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。并且在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

现有技术中，借助高清显示设备的自动化处理，其目的只是为了向下兼容未针对高清显示设备开发的网页内容，保证这些既有网页内容在高清显示设备上可以正确排版和顺利显示，但对于放大绘图程序产生的图像所带来的模糊问题并没有进行处理。本发明实施例提供的网页浏览器的Canvas绘图方法及装置，通过识别当前显示环境，针对高清显示设备进行必要处理，使得绘图程序生成的网页图像内容动态适配标准显示设备以及高清显示设备，不会在标准显示设备上进行高清计算而影响性能，而在高清显示设备上又可获得适用于本设备的清晰成像，以最优方案进行匹配，且不造成资源浪费。

为了便于理解本发明，首先澄清几个基本概念，本发明实施例中，将DPR(devicepixelratio，设备像素比)为1的显示设备称之为标准显示设备，DPR大于1的显示设备称之为高清显示设备。本发明实施例提供的网页浏览器的Canvas绘图装置，用于替换初始化时网页浏览器的原生Canvas对象，整个实施过程无需对原有大量的绘图代码进行修改；初始化过程可在原有绘图程序进行绘图之前全部完成，无需对原有绘图程序的绘图逻辑做任何改变即可达到目的，实施简单快速。

下面对本发明实施例提供的网页浏览器的Canvas绘图装置的实现原理进行详细说明。

1、本发明实施例中，将网页浏览器的Canvas绘图装置记作xh5_Canvas，对HTML5的原生Canvas进行封装，内部生成Canvas实例，构造函数接收宽、高两个参数，可以称为Canvas的指定尺寸；并对外暴露用于重置Canvas的指定尺寸的APIresize(width_,height_)，同样接收宽、高两个参数。

2、xh5_Canvas初始化时，进行网页浏览器的Canvas兼容性检查，兼容性检查主要涉及网页浏览器是否可以生成具备可用Canvas绘图上下文的Canvas对象。在确认网页浏览器对Canvas的支持后，使用网页浏览器原生的页面元素生成函数，根据Canvas的指定尺寸初始化生成Canvas对象并获取其绘图上下文。

实现代码如下：

varcanvas＝document.createElement('canvas')；

if(canvas.getContext&&canvas.getContext('2d')){/*支持HTML5Canvas*/}

3、读取DPR(devicepixelratio，设备像素比)和Canvas绘图上下文的BSPR(backingstoragepixelratio，缓冲区像素比)。DPR缺省值设定为1，BSPR缺省值设定为1。确定DPR值与BSPR值二者之比，记作HDPR，本发明实施例中，将HDPR称为缩放比例参数，并存储备用。需要说明的是，部分显示设备上DPR的实际取值不为整数，由于“半像素”问题同样会导致图像边缘模糊，本发明实施例中对DPR的实际取值向上取整，从而获取到DPR值供使用。

实现代码如下：

vardr＝Math.ceil(window.devicePixelRatio||1),

bspr＝canvas.getContext('2d').webkitBackingStorePixelRatio||1；

varhdpr＝dr/bspr；

4、实例化Canvas对象及通过resize重置的实现。

将由参数设置的宽、高作为Canvas的指定尺寸，以CSS(层叠样式表)形式作用于Canvas对象，作为页面内容排版使用；

按照确定出的HDPR值，对Canvas的指定尺寸(即参数指定的宽、高)进行缩放(即按照HDPR值对Canvas的指定尺寸放大相应倍数)，得到Canvas的实际尺寸，用以承载绘图程序产生的图像数据；

按照确定出的HDPR值，使用公有缩放函数scale对Canvas绘图上下文进行缩放(即按照HDPR值对Canvas绘图上下文放大相应倍数)。

实现代码如下：

canvas.style.width＝width_+'px'；

canvas.style.height＝height_+'px'；

canvas.width＝width_*hdpr；

canvas.height＝height_*hdpr；

canvas.getContext('2d').scale(hdpr,hdpr)；

5、至此网页浏览器的Canvas绘图装置xh5_Canvas准备完毕。将绘图代码初始化时生成canvas对象的部分替换为本装置，即可在各显示设备中获得清晰成像。

实现代码如下：

varcanvas；

canvas＝document.createElement('canvas')；/*被替换的原有代码：*/

varmodule＝newxh5_Canvas(width,height)；canvas＝module.canvas；/*替换的新代码*/

基于以上实现原理的介绍，本发明实施例提供一种网页浏览器的Canvas绘图方法，如图1所示，包括：

S101、根据设置的Canvas(画布)的指定尺寸初始化生成Canvas对象，并获取Canvas绘图上下文。

需要说明的是，根据设置的Canvas的指定尺寸初始化生成Canvas对象，并获取Canvas绘图上下文之前，还包括网页浏览器创建HTML(超文本标记语言)页面的步骤。

较佳的，所述根据设置的Canvas的指定尺寸初始化生成Canvas对象之前，还包括：通过对网页浏览器的Canvas兼容性检查确认网页浏览器支持Canvas。所述Canvas兼容性检查包括网页浏览器是否可以生成具备可用Canvas绘图上下文的Canvas对象。

S102、获取DPR(设备像素比)和Canvas绘图上下文的BSPR(缓冲区像素比)，根据获取到的DPR值与BSPR值二者之比，确定HDPR(缩放比例参数)值。

具体实施中，获取到的DPR值由DPR的实际取值向上取整得到。

S103、实例化Canvas对象，按照确定出的HDPR值对Canvas绘图上下文进行缩放，按照确定出的HDPR值对Canvas的指定尺寸进行缩放得到Canvas的实际尺寸用以承载绘图程序产生的图像数据，设定Canvas的指定尺寸用以页面内容排版。

其中，设定Canvas的指定尺寸用以页面内容排版，具体包括：将Canvas的指定尺寸以CSS(层叠样式表)形式作用于Canvas对象，作为页面内容排版使用。按照确定出的HDPR值对Canvas绘图上下文进行缩放，具体包括：按照确定出的HDPR值，使用公有缩放函数scale对Canvas绘图上下文进行缩放。

S104、网页浏览器基于实例化的Canvas对象进行Canvas绘图。

下面对Canvas绘图过程进行简单介绍：

由代码控制的Canvas绘图过程以像素为单位进行图像绘制；

代码所生成的Canvas对象在渲染输出到显示设备前，由网页浏览器的缓冲区(BackingStorage)管理，Canvas每一像素的RGBA值均保存在缓冲区中，不仅仅是程序绘制所涉及的区域，空白区域也将以0值记录，便于缩放控制；

网页浏览器成像时，按照页面尺寸规格(由CSS指定)进行网页内容排版，其中的图像内容按照DPR(设备像素比)从缓冲区读取图像数据。标准显示设备的DPR值为1即不处理，缓冲区图像数据可以满足显示数据量的需求；高清显示设备的DPR值大于1，未经本方案处理过的图像数据将会遇到缓冲区内图像数据不足的问题，故网页浏览器对其进行放大处理导致模糊。而经过本方案处理的图像数据已经按照最终分辨率进行了适应性放大，缓冲区内图像数据满足放大后的成像要求，故最终显示效果清晰。

需要指出的是，不同网页浏览器在同一显示设备上成像时，BSPR(缓冲区像素比)未必相同。例如同一台苹果电脑上工作的Safari6浏览器的BSPR(缓冲区像素比)为2，Chrome浏览器的BSPR(缓冲区像素比)为1。而Safari更新到6.1及以后版本，官方又将此值重新设定为1。本发明实施例中，通过设置缩放比例参数HDPR，HDPR取值为DPR值与BSPR值二者之比，所以不会在缓冲区已将图像数据进行放大后又再次放大，从而避免了对内存占用和显示性能造成的影响。

本发明实施例中，xh5_Canvas初始化时计算得到的HDPR值在标准显示设备上为1，后继处理过程进行乘1操作依然为原值，即不对标准显示设备进行处理；高清显示设备上设备像素比大于1，同样根据HDPR值，如果没有网页浏览器处理且缓冲区像素比为1的情况下，HDPR值将大于1进而对Canvas对象进行放大处理以获得最终显示足够的图像数据量；浏览器缓冲区已进行放大处理的情况，例如DPR值与BSPR值均为2，HDPR值又为1，即不会进行二次处理。

基于同一技术构思，本发明实施例提供了一种网页浏览器的Canvas绘图装置，由于该装置解决问题的原理与网页浏览器的Canvas绘图方法相一致，因此该装置的实施可以参见方法的实施，重复之处不在赘述。

网页浏览器的Canvas绘图装置，通常情况下封装为插件形式设置于网页浏览器中，如图2所示，网页浏览器的Canvas绘图装置的一种可能结构，包括：

初始化单元201，用于根据设置的画布Canvas的指定尺寸初始化生成Canvas对象，并获取Canvas绘图上下文；

获取单元202，用于获取设备像素比DPR和Canvas绘图上下文的缓冲区像素比BSPR；

确定单元203，用于根据获取到的DPR值与BSPR值二者之比，确定缩放比例参数HDPR值；

绘图环境准备单元204，用于实例化Canvas对象，按照确定出的HDPR值对Canvas绘图上下文进行缩放，按照确定出的HDPR值对Canvas的指定尺寸进行缩放得到Canvas的实际尺寸用以承载绘图程序产生的图像数据，设定Canvas的指定尺寸用以页面内容排版。

较佳的，网页浏览器的Canvas绘图装置还包括：

检查单元200，用于通过对网页浏览器的Canvas兼容性检查确认网页浏览器支持Canvas时，触发所述初始化单元201。

检查单元200，具体用于检查网页浏览器是否可以生成具备可用Canvas绘图上下文的Canvas对象，若是，确认网页浏览器支持Canvas，触发所述初始化单元201。

本领域的技术人员应明白，本发明的实施例可提供为方法、装置或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims

1.一种网页浏览器的Canvas绘图方法，其特征在于，包括：

网页浏览器基于实例化的Canvas对象进行Canvas绘图。

2.如权利要求1所述的方法，其特征在于，所述根据设置的Canvas的指定尺寸初始化生成Canvas对象之前，还包括：通过对网页浏览器的Canvas兼容性检查确认网页浏览器支持Canvas。

3.如权利要求2所述的方法，其特征在于，所述Canvas兼容性检查包括网页浏览器是否可以生成具备可用Canvas绘图上下文的Canvas对象。

4.如权利要求1所述的方法，其特征在于，所述设定Canvas的指定尺寸用以页面内容排版，具体包括：将Canvas的指定尺寸以层叠样式表CSS形式作用于Canvas对象，作为页面内容排版使用。

5.如权利要求1所述的方法，其特征在于，所述按照确定出的HDPR值对Canvas绘图上下文进行缩放，具体包括：使用公有缩放函数scale，按照确定出的HDPR值将Canvas绘图上下文放大相应倍数。

6.如权利要求1所述的方法，其特征在于，所述获取到的DPR值由DPR的实际取值向上取整得到。

7.一种网页浏览器的Canvas绘图装置，其特征在于，包括：

8.如权利要求7所述的装置，其特征在于，还包括：

检查单元，用于通过对网页浏览器的Canvas兼容性检查确认网页浏览器支持Canvas时，触发所述初始化单元。

9.如权利要求8所述的装置，其特征在于，所述检查单元，具体用于检查网页浏览器是否可以生成具备可用Canvas绘图上下文的Canvas对象，若是，确认网页浏览器支持Canvas，触发所述初始化单元。

10.如权利要求7-9任一所述的装置，其特征在于，网页浏览器的Canvas绘图装置封装为插件形式设置于网页浏览器中。