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

本节目标：

(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函数中完成。

这节就到这里。