使用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);