面試中canvas繪制圖片模糊圖片問題處理

csdn   發布時間:2022-03-09 17:16:53   作者:Q.E.D   我要評論
這篇文章主要為大家介紹了canvas繪制圖片,圖片變模糊問題的幾種處理解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步

問題:canvas繪制圖片,圖片變模糊

設定一個一定尺寸的canvas,我這里設置的畫布大小是400px*400px。當一張圖片完全畫到畫布上的時候,大概率都會出現圖片模糊的情況。
我拿下面一張圖片畫到canvas上作為例子,看上去應該比較明顯的有模糊的感覺。

在這里插入圖片描述

單方面的去修改圖片精度,換成更高清的圖片,事實證明確實有一丟丟用,但是效果不是很明顯。況且我當時那個圖片由于是手繪的,大小有5M,也不會切片加載圖片,直接整個加載非常耗時。

那么如何去處理這樣的問題呢?

生活中應該大家都遇到過這樣的情況,同樣的1080p的視頻,在大屏顯示器上看和手機上看效果是不一樣的,大屏往往會讓人感覺一種模糊感。而在手機小屏幕上,就會感覺異常的清晰。

要點:兩個點

通過上面的一個例子,我們可以將圖片放大,然后再繪制進原先大小的canvas中,這樣圖片的精度受損會比較小

了解canvas的繪制原理(*打星號)

canvas其實就是一張畫布,所以如果可以的話,你可以將它放大,可以發現它也是有一個個的像素組成的。

在這里插入圖片描述

如上圖,可以看到一個個的網格。假設我們需要在上面繪制一條1px的線條,就會得到上面的效果。
但是canvas是的繪制方式是從中線開始繪制,并向兩側延伸的。 

在這里插入圖片描述

他會以圖中的紅線作為中線,向兩邊延伸,從而得到1px的縱向線條。但是像素是不允許0.5px的出現的,所以它索性就直接再延伸一點,將像素給填滿。所以你看到的效果是下面這種??

在這里插入圖片描述

所以當一張圖片被繪制到canvas中的時候,很多區域都會被繪制兩次,所以出現重疊導致你看到的圖片是模糊的。
其實馬賽克的原理也是,相鄰像素點之間的顏色進行運算進行交叉覆蓋,起到打碼的效果。
所以有幾種不同的解決方案。

解決方案

方法一

在繪制的時候,如果是線條,可以通過移動0.5px找準中線來達到目的,例如:

ctx.moveTo(100.5,100.5);
ctx.lineTo(200.5,100.5);

方法二

如果是圖片,可以通過放大一倍canvas大小,但是通過css保持canvas大小不變,然后再繪制進canvas中,這樣在canvas放大一倍的情況下繪制進去圖片,然后通過css縮小canvas到原來大小達到目的。

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas繪制圖片模糊</title>
  </head>
  <body>
    <img
      id="img"
      src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/09/0C/Cg-4WVV6jWmIczjzAAdzu1eYHzwAAFK1wD9poMAB3PT053.jpg"
      width="100px"
      height="100px"
      style="visibility: hidden;"
    />
    <canvas id="canvas" width="400px" height="400px"></canvas>
    <canvas
      id="canvas2"
      width="800px"
      height="800px"
      style="width: 400px; height: 400px;"
    ></canvas>
  </body>
  <script>
    function init() {
      console.log(1234);
      let canvas = document.getElementById("canvas");
      let img = document.getElementById("img");
      let context = canvas.getContext("2d");
      context.drawImage(img, 0, 0, 400, 400);
 
      let canvas2 = document.getElementById("canvas2");
      let context2 = canvas2.getContext("2d");
      context2.drawImage(img, 0, 0, 800, 800);
    }
    window.onload = init;
  </script>
</html>
 

為了方便,就都寫在一個html中了,圖片也是找的網圖。左邊是未處理,也就是代碼中的canvas效果,右邊是通過方法2處理后的,也就是canvas2效果,請自行鑒別嗷。

在這里插入圖片描述

方法三

可以通過 transform:scale(0.5)的方式對圖片進行縮放,再繪制到canvas中

以上就是面試中canvas繪制圖片模糊圖片問題處理的詳細內容,更多關于面試canvas繪制圖片模糊解決的資料請關注腳本之家其它相關文章!

相關文章

  • 刷機精靈HTC One X錘子ROM刷機圖文教程

    本文為大家詳細介紹下刷機精靈HTC One X錘子ROM刷機的具體步驟,感興趣的朋友可以參考下哈,希望對大家有所幫助
    2013-06-28
  • 大神F1手機做工怎么樣 酷派大神F1拆機圖評測介紹

    酷派大神F1是目前千元國產手機中最受關注的一款,酷派大神F1最大的亮點是再次刷新千元神器紅米手機性價比記錄,成為一款時下千元性價比手機終結者。很多網友會對該機產生做
    2014-04-01
  • 3D單機麻將游戲 v1.1 安卓免費版

    經典麻將游戲,可以輕松地和三位電腦玩家PK。支持主流胡牌方法,還可以通過使用偷天換日,透視眼,移花接木等各種道具,玩出像大四喜、九蓮寶燈、十三幺、大三元等大滿役!
    2013-09-26
  • 神之刃火箭龍屬性技能圖鑒

    神之刃游戲加入了戰寵火箭龍!那么該寵物好不好?技能屬性怎么樣?下面通過圖鑒為你整理解析該寵物
    2014-04-08
  • 面試中canvas繪制圖片模糊圖片問題處理

    這篇文章主要為大家介紹了canvas繪制圖片,圖片變模糊問題的幾種處理解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步
    2022-03-09
  • canvas實現貪食蛇的實踐

    本文主要介紹了canvas實現貪食蛇的實踐,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-14
  • 使用canvas仿Echarts實現金字塔圖的實例代碼

    本文主要介紹了使用canvas仿Echarts實現金字塔圖的實例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-09
  • Canvas繪制像素風圖片的示例代碼

    像素風的游戲是80,90后的童年,像素風本身就是由極度簡單的元素構成極度復雜的畫面,本文介紹了Canvas繪制像素風圖片,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-22
  • Canvas如何做個雪花屏版404的實現

    本文主要介紹了Canvas如何做個雪花屏版404的實現,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-17
  • 使用canvas對video視頻某一刻截圖功能

    我本次的需求是多人視頻中對某一視頻某一刻的截圖,展示視頻直接用的原生video標簽,今天通過使用canvas對video視頻某一刻截圖功能,感興趣的朋友跟隨小編一起看看吧
    2021-09-16

最新評論

免费人成视频在线观看