[Canvas绘图] 第10节图片加载

最新推荐文章于 2023-06-08 09:52:04 发布

mwsister

最新推荐文章于 2023-06-08 09:52:04 发布

阅读量565

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/mwsister/article/details/50159185

版权

Html5 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文介绍了在Canvas中处理图片加载的步骤和注意事项，包括必须在服务器环境中使用getImageData()，避免图片拉伸失真的drawImage()方法，以及确保设置image.src以加载图片。同时，强调了处理imageData需在onload内完成，否则可能无法正常显示。

摘要由CSDN通过智能技术生成

本节目标：
(1) 用Canvas加载并显示图片

实现步骤：

效果如图:

代码如下：

/**
* @usage   图片加载处理例
* @author  mw
* @date    2015年12月03日  星期四  07:50:42 
* @param
* @return
*
*/
	function myplot() {
		plot.init();
		setPreference();				
		
		var image = new Image();
		image.src = "./sample.png";
		
		
		image.onload = function() {
			plot.drawImage(image);
			var width = 10;
			var height = 10;
			var xOffset = 300;
			var yOffset = 200;
			var x0 = xOffset;
			var y0 = yOffset;
			var x1 = xOffset + width;
			var y1 = yOffset + height;
			var imagedata = plot.getImageData(x0, y0, width, height);
			plot.putImageData(imagedata, 0, 0);

			var pointInfo = "<br/>";
			for (var i = 0, len = imagedata.data.length; i < len; i += 4) {
				pointInfo += "<br/><X, Y>"+x0.toString() +", "+y0.toString() + "<R, G, B, A>";
				
				for (var j = 0; j<4; j++) {
					pointInfo += imagedata.data[i+j].toString() + ", ";
				}
				x0++;
				//行结束
				if (x0 == x1) {
					x0 = xOffset;
					y0++;
				}
			}
			
			var pointInfoNode = document.createTextNode(pointInfo);
			document.body.appendChild(pointInfoNode);
		};		
	}

这里面有几个小地方要注意，在使用Canvas.getImageData()时，必须要让它处于服务器中，比如localhost:8080/project/index.html这种，如果用文件系统地址比如file:///index.html这种是无法调用这个函数的。

另一个地方是Canvas.drawImage()有三个重载方法，但是前两个参数比较少的是缺省把图片拉伸到匹配画布大小，这样几乎所有时候都会比例失真，所以应该尽量使用9个参数的方法。

另一个地方是如果不先调用drawImage而去调用getImageData，不会出图，putImageData也一样。

另一个地方是虽然操作手册并没有提到，或许也不鼓励，但下面这样做确实是可行的：

	var imageData = new ImageData(100, 100);
		for (var i = 0; i < 100; i++) {
			for (var j = 0; j < 100; j++) {
				var pos = i*100 + j;
				imageData.data[pos * 4 + 0] = 255;
				imageData.data[pos * 4 + 1] = 255;
				imageData.data[pos * 4 + 2] = 0;
				imageData.data[pos * 4 + 3] = 255;
			}
		}			
		
		image.onload = function() {
			plot.drawImage(image, 0, 0, 300, 100);		
			
			plot.putImageData(imageData, 0, 0);
		};

也就是说并不一定需要先getImageData，而是可以直接自己生成一个。构造的两个参数是width和height.

另外要注意的是image.src一定要填，否则不出图。

本来我打算把imageData数据压入其它的Array，并在其它任意地方调用，但是我发现压不进去，所以处理过程必须要在onload函数中完成。

这节就到这里。