canvas -畫素操作

ImageData

ImageData物件中儲存著canvas物件真實的畫素資料。包括width，height，data（rgba的一維陣列，索引值從0到(高度×寬度×4)-1）

• createImageData(width,height[,imagedata]): 建立一個ImageData物件

//ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
var myImageData = ctx.createImageData(100, 100);
//建立寬高相同的ImageData，data不復制，初始為透明黑
var myImageData = ctx.createImageData(anotherImageData);
 

• getImageData(): 獲得一個包含畫布場景畫素資料的ImageData對像

var myImageData = ctx.getImageData(left, top, width, height);

• putImageData(myImageData,dx,dy): 對場景進行畫素資料的寫入。

• 圖片灰度： 用紅綠和藍的平均值，也可以用加權平均，例如x = 0.299r + 0.587g + 0.114b這個公式。

var grayscale = function() {
	ctx.drawImage(img, 0, 0);
	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	for (var i = 0; i < data.length; i += 4) {
		var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
		data[i] = avg; // red
		data[i + 1] = avg; // green
		data[i + 2] = avg; // blue
	}
	ctx.putImageData(imageData, 0, 0);
};
 

• 反相顏色：去減掉顏色的最大色值255

var invert = function() {
	ctx.drawImage(img, 0, 0);
	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	for (var i = 0; i < data.length; i += 4) {
		data[i] = 255 - data[i]; // red
		data[i + 1] = 255 - data[i + 1]; // green
		data[i + 2] = 255 - data[i + 2]; // blue
	}
	ctx.putImageData(imageData, 0, 0);
};
 

• 縮放

var zoomctx = document.getElementById('zoom').getContext('2d');
//將10×10畫素的對原畫布的裁剪調整為 200×200 。
zoomctx.drawImage(canvas, Math.abs(x - 5), Math.abs(y - 5), 10, 10, 0, 0, 200, 200);

• 反鋸齒(反鋸齒預設是啟用的)

var smoothbtn = document.getElementById('smoothbtn');
var toggleSmoothing = function(event) {
	zoomctx.imageSmoothingEnabled = this.checked;
	zoomctx.mozImageSmoothingEnabled = this.checked;
	zoomctx.webkitImageSmoothingEnabled = this.checked;
	zoomctx.msImageSmoothingEnabled = this.checked;
};
smoothbtn.addEventListener('change', toggleSmoothing);

• 儲存圖片

canvas.toDataURL([type][, encoderOptions]);
//type:圖片格式,預設'image/png'
//當type=['image/jpeg','image/webp']時可以設定,取值[0,1]。預設0.92
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL(); //png
var fullQuality = canvas.toDataURL("image/jpeg", 1.0); //jpeg

canvas.toBlob(callback[, type[, encoderOptions]]);
canvas.toBlob(function(blob){
	url = URL.createObjectURL(blob);
	document.querySelector('.myPic').src = url;
}, "image/jpeg", 0.95); // JPEG at 95% quality

• 轉ico（僅限Mozilla）

Windows XP不支援將PNG轉為ico，因此轉為bmp作為替代。設定下載屬性，生成下載連結。下載屬性的值將被用作檔名。

• 使用OS.File儲存canvas至本地（僅在Firefox chrome上下文或附加程式碼中有用）

• 基於toDataURL的低效能polyfill

示例

• 顏色選擇器