canvas繪製圖片drawImage學習

bilberry發表於2020-09-13

不得不說,html5中的canvas真的非常強大,從圖片處理,到視訊處理,再到遊戲開發,都能見到canvas的身影,然而,就這一個<canvas>標籤,功能居然如此強大,這主要歸功於canvas強大的API,也正是因為這麼多的API,讓很多人對canvas望而卻步。

drawImage繪製圖片

drawImagecanvas提供的一個方法,通過這個函式我們可以把一張圖片繪製到canvas中。首先看看這個方法的宣告:

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

先來解釋下幾個引數:

  • image:要繪製的圖片,支援很多形式,比如CSSImageValueHTMLImageElementSVGImageElementHTMLVideoElementHTMLCanvasElementImageBitmap 或者OffscreenCanvas

  • dx:d代表目的(destination),就是canvas上起點的x軸

  • dy:canvas上起點的y軸

  • dWidth:canvas上繪製的寬度

  • dHeight:canvas上繪製的高度

  • sx:s代表原來的(source),就是原始圖片的起點的x軸

  • sy:原始圖片的起點的y軸

  • sWidth:擷取的原始圖片的寬度

  • sHeight:擷取的原始圖片的高度

這麼多的引數,我來用一句話總結下這個函式的功能:從任意位置擷取指定大小的圖片並將其以指定大小繪製在canvas上的任意位置。這裡擷取的大小就是sWidthsHeight來設定,dHeightdWidth就是繪製的大小。

說了這麼多,來實際動手做一下:

<div style="border: 1px solid black; width: 300px;height: 300px;">

    <canvas id="c1" width="300" height="300"></canvas>

  </div>

<script>

var c = document.getElementById('c1');

var ctx = c.getContext('2d');

var img = new Image();

img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg";

img.onload = function (e) {

  drawImg(this);

};

function drawImg (img) {

  ctx.clearRect(0,0, c.width, c.height);

  ctx.drawImage(img, 0,0, 200, c.height);

}
</script>

這裡我這用了5個引數,我們來試下其他幾個引數,這裡我就想要美女的頭像並把它繪製到中間:

ctx.drawImage(img, 200,150, 160, 180, 70, 60, 160, 180);

做一個圖片放大器

思路很簡單,先獲取滑鼠位置的畫素點,然後把它繪製成更大的區域,就實現了放大。話不多說,先上效果圖:

程式碼也很簡單:

<div style="border: 1px solid black; width: 300px;height: 300px;">
    <canvas id="c1" width="300" height="300"></canvas>
  </div>

這裡需要注意的是,圖片資源不能跨域,比如這樣:

// 圖片改成百度的
img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg";

在getImageData是就會報錯,說是跨域了:

index.html:47 Uncaught DOMException: Failed to execute 'getImageData' on 
'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

canvas中的抗鋸齒

所謂抗鋸齒,就是圖片放大到很大時,能否看到一個一個的畫素點,能看到就說明不抗鋸齒,canvas中預設是開啟了抗鋸齒的,也就是imageSmoothingEnabled這個屬性是true,開啟抗鋸齒會破壞原有畫素,畫素之間是平滑過渡的,一般肉眼是看不出來的,我們來做個對比:

預設開啟抗鋸齒

關閉抗鋸齒

// 關閉抗鋸齒
ctx.imageSmoothingEnabled = false;

明顯的對比,關閉抗鋸齒之後,放大區域像打了馬賽克,能明顯看到每個畫素點,開啟抗鋸齒的情況下每個畫素點之間的漸變則很順暢,人眼看上去有種模糊的感覺。但從整個畫面看,關閉抗鋸齒後,圖片模糊了很多。

用canvas來渲染視訊

開頭也說過,canvas能處理視訊,現在我們用drawImage來渲染一個視訊。

先說思路:每隔一段時間擷取視訊的當前幀,繪製出來。就是這麼簡單,上程式碼:

<video id="video1" controls="" width="180" style="margin-top:15px;">
	  <source src="1.mp4" type="video/mp4">
	</video>

	<canvas id="c2" width="180" height="320"></canvas>

<script>
    var v=document.getElementById("video1");
var c3=document.getElementById("c2");
ctx3=c3.getContext('2d');
var i = null;

// 每20ms擷取視訊幀
v.addEventListener('play',function() {
	i = window.setInterval(function() {
		ctx3.drawImage(v,0,0, 180, 320)
	},20);
}, false);

v.addEventListener('pause',function() {
	window.clearInterval(i);
	i = null;
},false);

v.addEventListener('ended', function() {
	clearInterval(i);
	i = null;
},false);
</script>

效果:

cool, 左側是video標籤顯示的視訊,右側是我們用canvas繪製的,每20毫秒繪製一次,很棒哦。如果我們把時間放長一點,就能實現卡頓的效果?

drawImageData相容性

相關文章