计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指**不借助任何后端服务**纯前端实现的图像处理。本文会介绍canvas位图处理，SVG矢量图和CSS3图像处理，重点是canvas，并且最后会附上一个小应用。
canvas位图处理
HTML5 canvas为我们提供了一块画布，让前端也有了操作位图的功能：图片旋转、缩放、滤镜、压缩等都可以通过JS来实现。
图像基本处理
通过设置drawImage参数可以实现图片绘制、缩放、拉伸和裁剪等操作(注意canvas无法绘制体积过大图片，否则会卡甚至崩掉，大图可以分块读取绘制)：
![图片描述][1]
详细用法参考 drawImage()，DEMO源码戳这里 JS Bin.
只需要drawImage一个方法，就可以实现基本图形处理功能，再结合鼠标或滚轮事件，就可以实现更复杂的局部放大预览，缩放等功能了。
图像滤镜处理
现在的朋友圈发个图都要用滤镜美一下，复古清纯胶片LOMO各种风格应有尽有。canvas提供了getImageData方法来获取图像上每一个像素点的RGBA信息，这样我们就能对图片进行像素级处理了。通过特定算法来重写imageData中的像素信息，然后用setImageData方法把新的数据重新绘制在canvas上，这样就可以实现图像滤镜打码加特效等一系列功能。
比如我们现在要实现一个复古滤镜:
let sepiaFilter = function(imgData) { let d = imgData.data for (let i = 0; i < d.length; i += 4) { let r = d[i] let g = d[i + 1] let b = d[i + 2] d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) } return imgData}img.src = '/img/logo@2x.png' img.onload = () => { ctx.drawImage(img, 0, 0) let imgData = ctx.getImageData(0, 0, img.width, img.height) ctx.putImageData(sepiaFilter(imgData), 100, 0) }
![图片描述][2]
详细用法参考 getImageData() 和 putImageData()，DEMO源码戳这里 JSFiddle.
滤镜处理关键在于滤镜算法，要想写出更高级的特效需要有计算机图形学基础，对卷积矩阵、拉普拉斯变换、傅里叶变换等数学知识也要了解，这个坑很大我就不挖了。
图像base64存储
加完特效后如果我们想把图像保存下来，就可以用toDataURL方法来对图片进行格式转换、压缩存储了。
canvas.toDataURL() canvas.toDataURL("image/jpeg", 0.1)
由于存储形式是base64编码，原来图片的每三个字节都会被扩展成4字节，所以整体上编码后数据会比原来多约1/3。以下是通过toDataURL存储后的图片和原图大小相关对比数据(数据仅供参考，不具通用性)：
![图片描述][3]
可见存储后图片体积并不是原来的4/3，实际上处理后的图片都会比原图大好几倍，并且不同的图片增大的体积也是不确定的。如果是要上传图片到服务器，可以把base64转化成Blob二进制数据压缩上传；如果要直接在前端显示或供用户下载，jpg还好可以设置质量参数，要是png就没法压缩了。
只是用toDataURL还不够，用户需要通过手动点击图片-右键图片存储为来保存图片，如果要实现点击下载按钮自动下载图片还需要修改图片类型为octet-stream，然后利用HTML5的download属性强制让浏览器下载。
详细用法参考toDataURL(). 自动下载图片DEMO源码快戳我 JSFiddle.
程序员的备胎
有了以上基础，再结合成熟的图形处理算法，我们可以完成日常工作中大部分图像处理需求，以下列出了一些相关轮子可做备胎。备胎这种东西多多益善，万一以后用到了呢？
注意：本人很专一。
原文链接
