1. 程式人生 > >HTML5canvas給圖片加濾鏡

HTML5canvas給圖片加濾鏡

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)的位置放上我的新圖片 } }