从web图片裁剪出发：了解H5中的canvas

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

本篇内容不针对canvas文档对每个api进行逐个的详解！

重说三，好了，现在进入正文。在上一回《从web图片裁剪出发：了解H5中的blob》中我解释了图片在浏览器中以怎样的形式留存，并且在最后一个example中演示了选择图片、预览最后提交的过程。然而这个预览并没有起到什么卵用，因为只能预览不能处理，原图片还是原图片，预览变得可有可无。这一篇我们就在预览这一步里做点手脚，加入处理图片的功能。

我们先修改之前的example，既然要处理图片，肯定要引入canvas，所以我们把原来img这个标签去掉，取而代之的是canvas，并在js中加入对应的修改。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name='test'>
<input type="file" name='file'>
<input type="submit" value="提交">
</form>
<canvas width="0" height="0"></canvas>
<script>
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
preview = new Image();
document.test.file.addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
preview.src = this.result;
canvas.width = preview.width;
canvas.height = preview.height;
drawImage();
};
fr.readAsDataURL(this.files[0]);
})
function drawImage() {
ctx.drawImage(preview, 0, 0); //把图片绘制到canvas上
}
document.test.addEventListener('submit', function(e) {
e.preventDefault();
var formData = new FormData(),
xhr = new XMLHttpRequest(),
mime = 'image/jpeg',
dataUrl = canvas.toDataURL(mime, 0.8), //取出base64
data = atob(dataUrl.split(',')[1]),
n = data.length,
uInt8 = new Uint8Array(n),
blob;
while(n--) {
uInt8[n] = data.charCodeAt(n);
}
blob = new Blob([uInt8.buffer], {type: mime});
formData.append('file', blob, 'test.jpg');
xhr.open('post', '/upload');
xhr.send(formData);
})
</script>
</body>
</html>

之前example的canvas版实现了，现在我们加入处理图片的功能。首先我们加入裁剪的功能，裁剪的引入必须先引入橡皮筋功能，就是一个选取框。一般我们见过的选取框是这样的。

预览的样子

选取一部分的样子

我们来分析下实现这样一个功能需要做什么。首先选取框有个开始点和结束点，在鼠标按下去的时候确定开始点，在松开的时候确定结束点，在移动的时候还要不停的绘制。那么绘制一个有选取框的内容分几步呢？第一步是绘制底图，第二步是绘制阴影，第三部还是绘制底图，但是只作用于选取框内部。最后想取消选取框怎么办，我们还要有个方法重置开始点和结束点，并且只绘制底图。

我们一步一步来，首先确定开始点和结束点。

var sPoint = {},
ePoint = {};
canvas.addEventListener('mousedown', function(e) {
if(e.button === 0) {
sPoint.x = e.offsetX;
sPoint.y = e.offsetY;
sPoint.drag = true;
}
});

然后我们确定绘制阴影的的方法，并且在鼠标按下去移动的时候不停的绘制。

最后我们添加松开鼠标的事件监听，松开左键为拖动结束，松开右键为复原

canvas.addEventListener('mouseup', function(e) {
if(e.button === 0) {
sPoint.drag = false;
ePoint.x = e.offsetX;
ePoint.y = e.offsetY;
}else if(e.button === 2) {
restore();
}
});
function restore() {
sPoint = {};
ePoint = {};
drawImage();
}

由于右键会出现恶心的浏览器自带菜单栏，影响体验，我们屏蔽它。

document.addEventListener('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
});

现在选取框有了，我们要开始截取了。新添加一个按钮，然后添加点击监听。

html代码

js代码

现在我们裁剪后选择提交，会发现服务器生成的是裁剪后的图片

裁剪的功能完成了，我们在来实现第二个功能：灰度。如果说裁剪的功能在于clip的用法，那么灰度的实现是基于getImageData返回的对象的认识。这个对象中有一个属性叫data，这是一个数组，以4个为一组，分别存储了一个像素red、green、blue、opacity四个数据。也就是当你的canvas尺寸为1*1时，它的ImageData.data元素为4个。

废话不多说，直接给出实现的代码。

html代码

js代码

var grey = document.querySelector('#grey');
grey.addEventListener('click', function(e) {
e.preventDefault();
var startX = 0, startY = 0, width = canvas.width, height = canvas.height;
ctx.clearRect(0, 0, canvas.width, canvas.height); //一如既往的先清空画布，不然会处理含有选取框的图片内容
drawImage(); //绘制底图
var imgData = ctx.getImageData(startX, startY, width, height); //把整个底图的图片内容取出来
for(var i = 0; i < imgData.data.length;) {
var red = imgData.data[i],
green = imgData.data[i+1],
blue = imgData.data[i+2],
opacity = imgData.data[i+3], //不处理，可以省去这一行，占位说明这一位是透明度
average = (red + green + blue) / 3; //所谓灰度其实是取三种颜色的平均值
imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] = average; //三个颜色设为一样即是对应的灰色
i += 4;
}
ctx.putImageData(imgData, startX, startY, 0, 0, width, height); //把处理过的imagedata放回canvas中
preview.src = canvas.toDataURL(); //保存图片信息方便再进行处理
});