JS学习--canvas -像素操作

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

示例

• 颜色选择器