canvas濾鏡之簡單的取反

時間 2019-11-19

標籤 canvas 簡單简体版

原文原文鏈接

本身學習了一下canvas濾鏡javascript

編寫一個簡單的小界面，嘿嘿！css

註釋都在裏面啦啦啦，感興趣的來瞅瞅哦😯html

<!DOCTYPE html>java

<html> canvas

<head>數組

<title></title>spa

#wrap {對象

width: 600px;

height: 600px;

background-color: #EEEEEE;

}

#sourceDiv {

float: left;

border: 2px solid blue;

}

#canvasDiv {

float: right;

border: 2px solid red;

}

</style>

</head>

<body>

</div>

</div>

</body>

window.onload = function() {

var img = document.getElementById("img");

var canvas = document.getElementById("canvas");

var btn = document.getElementById("btn");

canvas.width = img.clientWidth;

canvas.height = img.clientHeight;

pen = canvas.getContext("2d");

pen.drawImage(img, 0, 0, canvas.width, canvas.height); //把圖片放在畫布上

}

//getImageData(x,y,width,height) 複製畫布上指定矩形的像素數據而後經過putImageData()將圖像數據放回畫布：

//返回ImageData對象，該對象拷貝了畫布指定矩形的像素數據

//對於 ImageData 對象中的每一個像素，都存在着四方面的信息rgba,

//color/alpha 信息以數組形式存在，並存儲於 ImageData 對象的 data 屬性中

//即 RGBA 值 eg:red=ImageData.data[0];

btn.onclick = function() {

var imgData = pen.getImageData(0, 0, canvas.width, canvas.height);

var len = canvas.width * canvas.height * 4;

//遍歷imgData.data改變像素值

for(var i = 0; i < imgData.data.length; i += 4) {

//每個像素的color/alpha 信息

//取反色

imgData.data[i] = 255 - imgData.data[i];

imgData.data[i + 1] = 255 - imgData.data[i + 1];

imgData.data[i + 2] = 255 - imgData.data[i + 2];

imgData.data[i + 3] = 255;

}

// 將圖像數據imgData放回畫布

//putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

//在畫布上的位置x y 在畫布上放置圖像的位置水平位置偏移量垂直位置偏移量圖像寬度

pen.putImageData(imgData, 0, 0);

}

</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。