一种canvas在高倍屏下处理模糊的方法技术

本发明专利技术公开了一种canvas在高倍屏下处理模糊的方法，涉及前端页面生成图片技术领域，该方法使用当前浏览器内置对象属性计算canvas画布的缩放倍率，确定canvas画布的大小区域，获取像素比，将canvas宽高进行放大，放大比例为：设备适应比率/浏览器实际渲染比率，再将其得到的放大比例对应到canvas的实际大小上面，按照实际缩放倍率来缩放canvas，实现图片的去模糊化生成。本发明专利技术能够完成对于不同分辨率及倍率下的屏幕下由前端canvas技术生成图片的需求，可以适用于多场景及业务需求。可以适用于多场景及业务需求。可以适用于多场景及业务需求。

【技术实现步骤摘要】
一种canvas在高倍屏下处理模糊的方法


[0001]本专利技术涉及前端页面生成图片
，具体地说是一种canvas在高倍屏下处理模糊的方法。

技术介绍

[0002]现代web网站有多种将网页内容转换成图片的技术，比如前端flash，canvas等技术。随着现如今多数主流浏览器目前不再支持flash技术及其标准，我们将生成图片的技术重心转移到canvas上面。
[0003]canvas不是矢量图，而是像图片一样是位图模式的。高dpi的显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该canvas在高倍率屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。
[0004]由于在实际的应用场景中,由前端生成图片时无法预测设备分辨率及倍率,因此需要一种匹配多种屏幕分辨率、倍率的生成图片的方式。

技术实现思路

[0005]本专利技术的技术任务是针对以上不足之处，提供一种canvas在高倍屏下处理模糊的方法，能够完成对于不同分辨率及倍率本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种canvas在高倍屏下处理模糊的方法，其特征在于，使用当前浏览器内置对象属性计算canvas画布的缩放倍率，确定canvas画布的大小区域，获取像素比，将canvas宽高进行放大，放大比例为：设备适应比率/浏览器实际渲染比率，再将其得到的放大比例对应到canvas的实际大小上面，按照实际缩放倍率来缩放canvas，实现图片的去模糊化生成。2.根据权利要求1所述的一种canvas在高倍屏下处理模糊的方法，其特征在于，由window对象及当前浏览器进行多条件适应，根据浏览器的window对象来获取当前屏幕的设备像素比例。3.根据权利要求2所述的一种canvas在高倍屏下处理模糊的方法，其特征在于，通过window对象的devicePixelRatio属性和canvas的backingStorePixelRatio属性来确定当前屏幕的设备像素比例；backingStorePixelRatio属性加上浏览器前缀来实现兼容。4.根据权利要求1所述的一种canvas在高倍屏下处理模糊的方法，其特征在于，使用style属性或CSS设置的width和height，实现canvas所在的实际区域设置画布的实际渲染大小；由所述的放大比例乘以style属性或CSS设置的width和height，得出canvas画布的具体宽度和长度。5.根据权利要求1
‑
4任一所述的一种canvas在高倍屏下处理模糊的方法，其特征在于，该方法的具体实现步骤如下：S1：根据浏览器的window对象来获取当前屏幕的设备像素比例；S2：确定canvas画布的大小区域：S3：按照实际缩放倍率来缩放canvas。6.一种canvas在高倍屏下处理模糊的系统，其特征在于，包括设备像素比例获取模块、canvas画布大小区域确定模块和canvas画布缩放模块，设备像素比例获取模块根据浏览器的window对象获取当前屏幕的设备像素比例；can...

【专利技术属性】
技术研发人员：刘艳招，黎文志，
申请(专利权)人：山东健康医疗大数据有限公司，
类型：发明
国别省市：