[Canvas绘图] 第11节 四大美人

本节目标：
(1) 用Canvas加载并显示图片
(2) 实现获取轮廓点

实现步骤：

代码如下：

/**
* @usage   图片加载处理例
* @author  mw
* @date    2015年12月03日  星期四  07:50:42 
* @param
* @return
*
*/
	function myplot() {		
		plot.init();
		setPreference();
		
		//图片
		var image = new Image();
		image.src = "./1.jpg";
		//只处理这100*100个象素
		var width = 200;
		var height = 300;
		//结果
		var retArray = new Array();
		var pointInfo = "[";
		
		image.onload = function() {
			plot.drawImage(image);
			var imagedata = plot.getImageData(0, 0, width, height);
			
			
			var pos = 0;
			var R0 = 0;
			var R1 = 0;
			var G0 = 0;
			var G1 = 0;
			var B0 = 0;
			var B1 = 0;
			var gap = 40;
			
			
			//水平方向找差异
			for (var row = 0; row < height; row++) {
				for (var col = 1; col < width; col++) {
					//pos最小为1
					pos =row * width  + col;
						R0 = imagedata.data[4 * (pos-1)];				
						R1 = imagedata.data[4 * pos];
						G0 = imagedata.data[4 * (pos-1)+1];
						G1 = imagedata.data[4 * pos+1];
						B0 = imagedata.data[4 * (pos-1)+2]
						B1 = imagedata.data[4 * pos + 2]
					
					//简单容差判断
					if (Math.abs(R1-R0) > gap || 
							Math.abs(G1-G0)>gap || 
							Math.abs(B1-B0)>gap) {
						retArray.push(col);
						retArray.push(row);
						
						//记录坐标，打印信息
						pointInfo += "["+col.toString()+", "+row.toString()+"], ";
					}
				}
			}
			
			
			//垂直方向找差异
			for (var col = 0; col < width; col++) {
				for (var row = 1; row < height; row++) {
					//pos最小为第二行
					pos =row * width  + col;
						R0 = imagedata.data[4 * (pos-width)];				
						R1 = imagedata.data[4 * pos];
						G0 = imagedata.data[4 * (pos-width)+1];
						G1 = imagedata.data[4 * pos+1];
						B0 = imagedata.data[4 * (pos-width)+2];
						B1 = imagedata.data[4 * pos + 2];
					
					//简单容差判断
					if (Math.abs(R1-R0) > gap || 
							Math.abs(G1-G0)>gap || 
							Math.abs(B1-B0)>gap) {
						retArray.push(col);
						retArray.push(row);
						
						//记录坐标，打印信息
						pointInfo += "["+col.toString()+", "+row.toString()+"], ";
					}
				}
			}		
			
			plot.translate(200, 0);

			
			while (retArray.length  > 4) {
				fillCircle(retArray.shift()*1.5, retArray.shift()*1.5, 1);
				
			}
						
			pointInfo += "]";
			var pointInfoNode = document.createTextNode(pointInfo);
			document.body.appendChild(pointInfoNode);
			
	}	
}

我选择了几张彩图进行了试验，结果如下：

接着试

接着试

接着试

效果都很勉强，不过这只是最初步的处理。

本节就到这里。