面試中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刷機的具體步驟，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-28
- 酷派大神F1是目前千元國產手機中最受關注的一款，酷派大神F1最大的亮點是再次刷新千元神器紅米手機性價比記錄，成為一款時下千元性價比手機終結者。很多網友會對該機產生做2014-04-01
經典麻將游戲,可以輕松地和三位電腦玩家PK。支持主流胡牌方法,還可以通過使用偷天換日,透視眼,移花接木等各種道具,玩出像大四喜、九蓮寶燈、十三幺、大三元等大滿役！2013-09-26- 神之刃游戲加入了戰寵火箭龍！那么該寵物好不好？技能屬性怎么樣？下面通過圖鑒為你整理解析該寵物2014-04-08
這篇文章主要為大家介紹了canvas繪制圖片，圖片變模糊問題的幾種處理解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2022-03-09
本文主要介紹了canvas實現貪食蛇的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-14
本文主要介紹了使用canvas仿Echarts實現金字塔圖的實例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-09
像素風的游戲是80,90后的童年，像素風本身就是由極度簡單的元素構成極度復雜的畫面，本文介紹了Canvas繪制像素風圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-22
本文主要介紹了Canvas如何做個雪花屏版404的實現，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-17- 我本次的需求是多人視頻中對某一視頻某一刻的截圖，展示視頻直接用的原生video標簽，今天通過使用canvas對video視頻某一刻截圖功能，感興趣的朋友跟隨小編一起看看吧2021-09-16
最新評論