HTML5canvas給圖片加濾鏡
阿新 • • 發佈:2018-12-15
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var image = new Image();
image.src = "images/cat.jpg";
image. onload = function () {
cxt.drawImage(image, 10, 10);//把我的圖片放在(10,10)的位置
var imgData = cxt.getImageData(10, 10, 235, 235);
//我這個圖片大小是235*235,這裡指從(10,10)獲取寬235高235的畫素的data
var data = imgData.data;//每個畫素的data是個陣列(紅,綠,藍,透明度)
//遍歷每個畫素
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0];
data[i + 1] = 255 - data[i + 1];
data[i + 2] = 255 - data[i + 2];
//這裡只反轉顏色,不管透明度
}
//在指定位置輸出圖片
cxt.putImageData (imgData, 250, 10);
//在(250,10)的位置放上我的新圖片
}
}