[發(fā)明專利]一種canvas在高倍屏下處理模糊的方法

在審

• 申請(qǐng)?zhí)枺?/td>: 202110774160.1
• 申請(qǐng)日: 2021-07-08
• 公開（公告）號(hào): CN113436108A
• 公開（公告）日: 2021-09-24
• 發(fā)明（設(shè)計(jì)）人: 劉艷招;黎文志
• 申請(qǐng)（專利權(quán)）人: 山東健康醫(yī)療大數(shù)據(jù)有限公司
• 主分類號(hào): G06T5/00
• 分類號(hào): G06T5/00;G06T3/40;G06F16/957
• 代理公司: 濟(jì)南信達(dá)專利事務(wù)所有限公司 37100
• 代理人: 陳婷婷

本發(fā)明公開了一種canvas在高倍屏下處理模糊的方法，涉及前端頁(yè)面生成圖片技術(shù)領(lǐng)域，該方法使用當(dāng)前瀏覽器內(nèi)置對(duì)象屬性計(jì)算canvas畫布的縮放倍率，確定canvas畫布的大小區(qū)域，獲取像素比，將canvas寬高進(jìn)行放大，放大比例為：設(shè)備適應(yīng)比率/瀏覽器實(shí)際渲染比率，再將其得到的放大比例對(duì)應(yīng)到canvas的實(shí)際大小上面，按照實(shí)際縮放倍率來縮放canvas，實(shí)現(xiàn)圖片的去模糊化生成。本發(fā)明能夠完成對(duì)于不同分辨率及倍率下的屏幕下由前端canvas技術(shù)生成圖片的需求，可以適用于多場(chǎng)景及業(yè)務(wù)需求。

技術(shù)領(lǐng)域

本發(fā)明涉及前端頁(yè)面生成圖片技術(shù)領(lǐng)域，具體地說是一種canvas在高倍屏下處理模糊的方法。

背景技術(shù)

現(xiàn)代web網(wǎng)站有多種將網(wǎng)頁(yè)內(nèi)容轉(zhuǎn)換成圖片的技術(shù)，比如前端flash，canvas等技術(shù)。隨著現(xiàn)如今多數(shù)主流瀏覽器目前不再支持flash技術(shù)及其標(biāo)準(zhǔn)，我們將生成圖片的技術(shù)重心轉(zhuǎn)移到canvas上面。

canvas不是矢量圖，而是像圖片一樣是位圖模式的。高dpi的顯示設(shè)備意味著每平方英寸有更多的像素。也就是說二倍屏，瀏覽器就會(huì)以2個(gè)像素點(diǎn)的寬度來渲染一個(gè)像素，該canvas在高倍率屏幕下相當(dāng)于占據(jù)了2倍的空間，相當(dāng)于圖片被放大了一倍，因此繪制出來的圖片文字等會(huì)變模糊。

由于在實(shí)際的應(yīng)用場(chǎng)景中,由前端生成圖片時(shí)無法預(yù)測(cè)設(shè)備分辨率及倍率,因此需要一種匹配多種屏幕分辨率、倍率的生成圖片的方式。

發(fā)明內(nèi)容

本發(fā)明的技術(shù)任務(wù)是針對(duì)以上不足之處，提供一種canvas在高倍屏下處理模糊的方法，能夠完成對(duì)于不同分辨率及倍率下的屏幕下由前端canvas技術(shù)生成圖片的需求，可以適用于多場(chǎng)景及業(yè)務(wù)需求。

本發(fā)明解決其技術(shù)問題所采用的技術(shù)方案是：

一種canvas在高倍屏下處理模糊的方法，使用當(dāng)前瀏覽器內(nèi)置對(duì)象屬性計(jì)算canvas畫布的縮放倍率，確定canvas畫布的大小區(qū)域，獲取像素比，將canvas寬高進(jìn)行放大，放大比例為：

設(shè)備適應(yīng)比率/瀏覽器實(shí)際渲染比率，

再將其得到的放大比例對(duì)應(yīng)到canvas的實(shí)際大小上面，按照實(shí)際縮放倍率來縮放canvas，實(shí)現(xiàn)圖片的去模糊化生成。

該方法可以在不同分辨率及倍率下的屏幕下，由前端canvas技術(shù)生成無模糊圖片，完成對(duì)于不同分辨率及倍率下的屏幕下有前端canvas技術(shù)生成物模糊圖片的需求，使得該技術(shù)可以適用多場(chǎng)景及業(yè)務(wù)需求。

優(yōu)選的，由window對(duì)象及當(dāng)前瀏覽器進(jìn)行多條件適應(yīng)，根據(jù)瀏覽器的window對(duì)象來獲取當(dāng)前屏幕的設(shè)備像素比例。

進(jìn)一步的，通過window對(duì)象的devicePixelRatio屬性和canvas的backingStorePixelRatio屬性來確定當(dāng)前屏幕的設(shè)備像素比例；backingStorePixelRatio屬性在各瀏覽器廠商的獲取方式不一樣，所以需要將backingStorePixelRatio屬性加上瀏覽器前綴來實(shí)現(xiàn)兼容。

window對(duì)象的devicePixelRatio屬性表示屏幕的設(shè)備像素比，即用幾個(gè)(通常是2個(gè))像素點(diǎn)寬度來渲染一個(gè)像素；canvas的context中存在著backingStorePixelRatio屬性，該屬性的值決定了瀏覽器在渲染canvas之前會(huì)用幾個(gè)像素來存儲(chǔ)畫布信息。

優(yōu)選的，使用style屬性或CSS設(shè)置的width和height，實(shí)現(xiàn)canvas所在的實(shí)際區(qū)域設(shè)置畫布的實(shí)際渲染大小；由所述的放大比例乘以style屬性或CSS設(shè)置的width和height，便可以得出canvas畫布的具體寬度和長(zhǎng)度。