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

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

【技术实现步骤摘要】

本专利技术涉及图像处理
，尤其涉及一种网页浏览器的Canvas绘图方法及 目.ο
技术介绍
网页浏览器前端程控绘图的过程模仿了人类自然绘图的方式，简单描述为在一定的绘图空间(画布)内，将“画笔”反复在起点与终点间移动，由起点和终点所确定的无数个点、线、面的集合共同组成最终图像。]^￥1^5是HTML (Hyper Text Markup Language，超文本标记语言)最新的修订版本，2014年10月由W3C(万维网联盟)完成标准制定，目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS (层叠样式表)和JavaScript在内的一套技术组合，它希望能够减少网页浏览器对于RIA(Plug-1n-Based Rich InternetApplicat1n，需要插件的富互联网应用，例如 Adobe Flash、Microsoft SiIverlight、Oracle JavaFX等)的需求，并且提供更多能有效加强互联网应用的标准集。Canvas(画布)是HTML5中新增的一个重要元素，专门用来绘制图像，在网页上放置一个Canvas元素，就相当于在网页上放置一块“画布”，可以在其中进行图像的描绘。HTML5的Canvas使用脚本(通常是JavaScript)在网页上绘制图像，在传统的标准分辨率显示设备(简称标准显示设备)上前端Canvas搭配JavaScript语言编写绘图代码涉及的每个像素与显示设备的最小显示单元一一对应，最终渲染输出的图像在此显示设备上可获得相对最清晰的效果。现有技术中，标准显示设备获得更高分辨率的方式多为增大显示面积，以此获得更多空间用来显示更多内容，例如显示尺寸由19英寸提升到27英寸(显示尺寸是指显像管的可见部分的对角线尺寸，以英寸为单位)，最大分辨率也同时由1280X1024提升到1920X1080或更高。而在新兴的高清显示设备上，例如视网膜屏幕(分辨率超过人眼识别极限的高分辨率屏幕)、4K/5K屏幕等，更高的分辨率并不用来显示更多的内容，而是用来在同样面积显示相同内容时提升显示细腻度。现有技术中，为了充分发挥此类高清显示设备的显示能力，需使用比标准显示设备上尺寸更大的图像。以采用视网膜屏幕的iPhone6为例进行说明，需将标准显示设备上显示正常的100X 100像素的图像重新发布为200X200像素的图像；而在iPhone6 Plus上，则需将图像放大至300X300像素才能获得最清晰的成像效果。而对于没有进行放大处理的图像，例如在高清显示设备诞生之前已经发布的网页中所使用的绘图程序和图像，或是没有精力对高清显示设备提供支持的情况，高清显示设备所使用的软硬件系统将会自动向下兼容对图像进行处理后再渲染输出。高清显示设备的自动化处理算法通过将显示设备多个最小显示单元对应到原有图像的一个像素，视觉上将原有图像进行拉伸放大以保证在“占地面积”上表现正常从而保证既有网页内容排版显示无误。本专利技术人在专利技术过程中发现，为了在高清显示设备上获得清晰的成像效果，同时又保证对既有标准显示设备的兼容，不得不对相同图像发布多个尺寸规格以进行适配，造成了存储空间的浪费以及网络传输数据量的增大。且由于图像是静态的，在需要由程序动态生成内容的场景中此方法会放大上述缺点造成的资源浪费且难以实施。而高清显示设备提供的自动化处理方案，借助支持高清显示设备的软硬件系统的兼容能力，在最终成像前自动对图像进行拉伸放大处理，但对位图图像的放大直接导致了模糊现象的产生。
技术实现思路
本专利技术实施例提供一种网页浏览器的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绘图方法，其特征在于，包括：根据设置的画布Canvas的指定尺寸初始化生成Canvas对象，并获取Canvas绘图上下文；获取设备像素比DPR和Canvas绘图上下文的缓冲区像素比BSPR，根据获取到的DPR值与BSPR值二者之比，确定缩放比例参数HDPR值；实例化Canvas对象，按照确定出的HDPR值对Canvas绘图上下文进行缩放，按照确定出的HDPR值对Canvas的指定尺寸进行缩放得到Canvas的实际尺寸用以承载绘图程序产生的图像数据，设定Canvas的指定尺寸用以页面内容排版；网页浏览器基于实例化的Canvas对象进行Canvas绘图。

【技术特征摘要】

【专利技术属性】
技术研发人员：王瑄，
申请(专利权)人：新浪网技术中国有限公司，
类型：发明
国别省市：北京;11