使用canvas进行图像编辑的实例

使用canvas进行图像编辑的实例

前面的话

本文将分为几个小功能的形式来详细介绍canvas图像编辑

缩放

下面是一张分析图，假设默认情况下，图片和canvas宽高相同。图片的缩放(scale)范围为0.5到3，缩放时改变的是图片的大小和图片的坐标位置

W(宽) = canvas.width * scale

H(高) = canvas.height * scale

x坐标 = (W - canvas.width)/2;

y坐标 = (H - canvas.height)/2;

因此，代码如下

The canvas element is not supported!

水印

利用canvas可以实现向图片添加水印的功能，先通过file控件的reader选择图片，然后使用canvas添加图片及水印，并且使用toDataURL()和a标签实现添加水印后的图片的下载功能

The canvas element is not supported!

选择图片

添加水印

水印文字为

下载图片

放大镜

下面来实现一个放大镜的效果，鼠标按下并移动时，显示当前图片区域的放大效果，抬起后效果消失。放大镜效果主要使用离屏canvas的技术，离屏canvas放置的是图片的放大版，而普通canvas则放置图片的正常版

The canvas element is not supported!

The canvas element is not supported!

滤镜

下面利用canvas的getImageData()方法，获取原始图像数据，通过对图像数据进行修改，然后输出修改后的图像数据

The canvas element is not supported!

The canvas element is not supported!

无绿色

无蓝色

灰度

黑白

反色

马赛克效果

【普通模糊效果】

普通模糊效果不仅需要使用当前像素点，还需要使用周围的像素点，并把这些像素点都赋予平均值

function fnToBlur(n){

cxt2.clearRect(0,0,drawing2.width,drawing2.height);

var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height);

var tempImageData = imageData;

var data = imageData.data;

var tempData = tempImageData.data;

var blurR = n;

var totalnum = (2*blurR + 1)*(2*blurR + 1);

for(var i = blurR; i < drawing2.height - blurR; i++){

for(var j = blurR; j < drawing2.width - blurR; j++){

var totalr = 0, totalg = 0, totalb = 0;

for(var dx = -blurR; dx <= blurR; dx++){

for(var dy = -blurR; dy <= blurR; dy++){

var x = i + dx;

var y = j + dy;

var p = x*drawing2.width + y;

totalr += tempData[p*4+0];

totalg += tempData[p*4+1];

totalb += tempData[p*4+2];

}

}

var p = i*drawing2.width + j;

data[p*4+0] = totalr / totalnum;

data[p*4+1] = totalg / totalnum;

data[p*4+2] = totalb / totalnum;

}

}

imageData.data = data;

cxt2.putImageData(imageData,0,0);

}

【马赛克效果】

马赛克效果则是把一块区域的值，全部都赋予平均值

function fnToMosaic(n){

cxt2.clearRect(0,0,drawing2.width,drawing2.height);

var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height);

var tempImageData = imageData;

var data = imageData.data;

var tempData = tempImageData.data;

var size = n;

var totalnum = size*size;

for(var i = 0; i < drawing2.height; i+=size){

for(var j = 0; j < drawing2.width; j+=size){

var totalr = 0, totalg = 0, totalb = 0;

for(var dx = 0; dx < size; dx++){

for(var dy = 0; dy < size; dy++){

var x = i + dx;

var y = j + dy;

var p = x*drawing2.width + y;

totalr += tempData[p*4+0];

totalg += tempData[p*4+1];

totalb += tempData[p*4+2];

}

}

var p = i*drawing2.width + j;

var resr = totalr / totalnum;

var resg = totalg / totalnum;

var resb = totalb / totalnum;

for(var dx = 0; dx < size; dx++){

for(var dy = 0; dy < size; dy++){

var x = i + dx;

var y = j + dy;

var p = x*drawing2.width + y;

data[p*4+0]= resr;

data[p*4+1]= resg;

data[p*4+2]= resb;

}

}

}

}

imageData.data = data;

cxt2.putImageData(imageData,0,0);

}

下面是一个实例

The canvas element is not supported!

The canvas element is not supported!

轻度模糊

重度模糊

轻度马赛克

重度马赛克

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。