使用js處理圖片效

var canvas = document.createElement('canvas');
		var cxt = canvas.getContext('2d');
		
		canvas.width = 600;//創建的canvas需要設置高和寬
		canvas.height = 600;
		
		var width = parseInt(canvas.getAttribute('width'));
		var height = parseInt(canvas.getAttribute('height'));
		
		var image = new Image();
		image.onload = imageLoaded;
		image.src = "img/1.jpg";

底片效果

function imageLoaded(){//將圖像滑到畫布上cxt.drawImage(image, 0, 0);//取圖像的像素數組imageData = cxt.getImageData(0, 0, width, height);//圖片像素數組for(var y = 0; y < imageData.height; y++){for(var x = 0; x < imageData.width; x++){var index = y * imageData.width + x;//一個像素佔4字節，p爲當前指針的位置var p = index * 4;var r = p + 0;var g = p + 1;var b = p + 2;r = 255 - imageData.data[r]; g = 255 - imageData.data[g];b = 255 - imageData.data[b];//將改變後的顏色存進數組imageData.data[p + 0] = r;imageData.data[p + 1] = g;imageData.data[p + 2] = b;}}cxt.putImageData(imageData, 0, 0);var imageData = canvas.toDataURL("image/png");var img = document.createElement("img");img.src = imageData;img.width = "600";document.body.appendChild(img);

灰度效果

function imageLoaded(){//將圖像滑到畫布上cxt.drawImage(image, 0, 0);//取圖像的像素數組imageData = cxt.getImageData(0, 0, width, height);for(var y = 0; y < imageData.height; y++){for(var x = 0; x < imageData.width; x++){var index = y * imageData.width + x;//一個像素佔4字節，p爲當前指針的位置var p = index * 4;var r = p + 0;var g = p + 1;var b = p + 2;r = g = b = (imageData.data[r] + imageData.data[g] + imageData.data[b]) / 3 ;//將改變後的顏色存進數組imageData.data[p + 0] = r;imageData.data[p + 1] = g;imageData.data[p + 2] = b;}}cxt.putImageData(imageData, 0, 0);var imageData = canvas.toDataURL("image/png");var img = document.createElement("img");img.src = imageData;img.width = "600";document.body.appendChild(img);

黑白效果

function imageLoaded(){//將圖像滑到畫布上cxt.drawImage(image, 0, 0);//取圖像的像素數組imageData = cxt.getImageData(0, 0, width, height);for(var y = 0; y < imageData.height; y++){for(var x = 0; x < imageData.width; x++){var index = y * imageData.width + x;//一個像素佔4字節，p爲當前指針的位置var p = index * 4;var r = p + 0;var g = p + 1;var b = p + 2;var avg= (imageData.data[r] + imageData.data[g] + imageData.data[b]) / 3 ;if(avg > 100) {r = g = b = 255 ;}else{r = g = b = 0 ;}//將改變後的顏色存進數組imageData.data[p + 0] = r;imageData.data[p + 1] = g;imageData.data[p + 2] = b;}}cxt.putImageData(imageData, 0, 0);var imageData = canvas.toDataURL("image/png");var img = document.createElement("img");img.src = imageData;img.width = "600";document.body.appendChild(img);