var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0, c.width, c.height);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
//alert(img.width);
//alert(img.height);
//alert(c.width);
//alert(c.height);
//alert(img.width*img.height*4);
//alert(imgData.data.length);
// invert colors
var i;
for (j = 0; j < img.height; j += 1) {
var m_i = 0;
for (i = 0; i < img.width; i += 1) {
if (((imgData.data[(j * img.width + i) * 4]
+ imgData.data[(j * img.width + i) * 4 + 1] + imgData.data[(j
* img.width + i) * 4 + 2]) / 3) > 20) {
imgData.data[(j * img.width + i) * 4] = 255;
imgData.data[(j * img.width + i) * 4 + 1] = 255;
imgData.data[(j * img.width + i) * 4 + 2] = 255;
} else {
imgData.data[(j * img.width + i) * 4] = 0;
imgData.data[(j * img.width + i) * 4 + 1] = 0;
imgData.data[(j * img.width + i) * 4 + 2] = 0;
m_i = m_i + 1;
}
imgData.data[(j * img.width + i) * 4 + 3] = 255;
}
//alert(m_i);
if (m_i < 60) {
j = j - 1;
for (i = 0; i < img.width; i += 1) {
imgData.data[(j * img.width + i) * 4] = 255;
imgData.data[(j * img.width + i) * 4 + 1] = 0;
imgData.data[(j * img.width + i) * 4 + 2] = 0;
imgData.data[(j * img.width + i) * 4 + 3] = 255;
}
j = j + 1;
}
}
ctx.putImageData(imgData, 0, 0);
這串程式碼他會顯示如圖一的圖
圖一：http://imgur.com/6Bfj5QB
請問該如何修改程式碼使他顯示如圖二這樣的圖
圖二：http://imgur.com/syFEIuy