<canvas id="canvas" width="574" height="820"></canvas>
通過改變rgb的值就可以改變圖片的顏色了
var img = new Image();
img.onload = function () {
var context = canvas.getContext('2d');
// 圖片繪制
context.drawImage(this, 0, 0, 574, 820);
// 然后獲取中間100*100區(qū)域數(shù)據(jù)
var imageData = context.getImageData(0, 0, 574, 820);
var length = imageData.data.length;
for (var index = 0; index < length; index += 4) {
var r = imageData.data[index];
var g = imageData.data[index + 1];
var b = imageData.data[index + 2];
//這里可以對 r g b 進行計算（這里的rgb是每個像素塊的rgb顏色）
imageData.data[index] = r;
imageData.data[index + 1] = g;
imageData.data[index + 2] = b;
}
// 更新新數(shù)據(jù)
context.putImageData(imageData, 0, 0);
};
img.src = './content.png'; //圖片地址
圖片描邊設置
通過每個像素的透明通道來判斷該像素點是不是圖片主題，（圖片主體部分的透明通道一定有一個范圍捎拯，注意剪验，這里對圖片有要求待牵，不能是鏤空圖）
var img = new Image();
img.onload = function () {
var context = canvas.getContext('2d');
// 圖片繪制
context.drawImage(this, 0, 0, 574, 820);
// 然后獲取中間100*100區(qū)域數(shù)據(jù)
var imageData = context.getImageData(0, 0, 574, 820);
var length = imageData.data.length;
for (var index = 0; index < length; index += 4) {
var r = imageData.data[index];
var g = imageData.data[index + 1];
var b = imageData.data[index + 2];
var a = imageData.data[index + 3];
//這里可以對 r g b a進行計算（這里的rgba是每個像素塊的rgb顏色）
if (a > 0 && a < 255) {
imageData.data[index] = 255;
imageData.data[index + 1] = 20;
imageData.data[index + 2] = 147;
imageData.data[index + 3] = 255;
}
}
// 更新新數(shù)據(jù)
context.putImageData(imageData, 0, 0);
};
img.src = './content.png'; //圖片地址
