（图片来源：https://freecontent.manning.com/the-computer-vision-pipeline-part-2-input-images/）
「图像处理的本质实际上就是对这些像素矩阵进行计算。」 其实位图中的图像类型，除了二值图像和 RGB 图像之外，还有灰度图像、索引图像和 YUV 图像。这里我们不做过多介绍，感兴趣的小伙伴，请自行查阅相关资料。
二、图片处理库2.1 AlloyImage❝
基于 HTML 5 的专业级图像处理开源引擎。
https://github.com/AlloyTeam/AlloyImage
❞
AlloyImage 基于 HTML5 技术的专业图像处理库，来自腾讯 AlloyTeam 团队。它拥有以下功能特性：
- 基于多图层操作 —— 一个图层的处理不影响其他图层；
- 与 PS 对应的 17 种图层混合模式 —— 便于 PS 处理教程的无缝迁移；
- 多种基本滤镜处理效果 —— 基本滤镜不断丰富、可扩展；
- 基本的图像调节功能 —— 色相、饱和度、对比度、亮度、曲线等；
- 简单快捷的 API —— 链式处理、API 简洁易用、传参灵活；
- 多种组合效果封装 —— 一句代码轻松实现一种风格；
- 接口一致的单、多线程支持 —— 单、多线程切换无需更改一行代码，多线程保持快捷 API 特性。
对于该库 AlloyTeam 团队建议的使用场景如下：
- 桌面软件客户端内嵌网页运行方式 >>> 打包 Webkit 内核：用户较大头像上传风格处理、用户相册风格处理（处理时间平均 < 1s）；
- Win8 Metro 应用 >>> 用户上传头像，比较小的图片风格处理后上传（Win8 下 IE 10 支持多线程）；
- Mobile APP >>> Andriod 平台、iOS 平台小区风格 Web 处理的需求，如 PhoneGap 应用，在线头像上传时的风格处理、Mobile Web 端分享图片时风格处理等。
「使用示例」
//$AI或AlloyImage初始化一个AlloyImage对象
varps=$AI(img,600).save('jpg',0.6);
//save将合成图片保存成base64格式字符串
varstring=AlloyImage(img).save('jpg',0.8);
//savefile将合成图片下载到本地
img.onclick=function(){
AlloyImage(this).saveFile('处理后图像.jpg',0.8);
}
「在线示例」
❝
http://alloyteam.github.io/AlloyImage/
❞
（图片来源：http://alloyteam.github.io/AlloyImage/）
2.2 blurify❝
blurify.js is a tiny(~2kb) library to blurred pictures, support graceful downgrade from css mode to canvasmode.
https://github.com/JustClear/blurify
❞
blurify.js 是一个用于图片模糊，很小的 JavaScript 库（约 2 kb），并支持从 CSS 模式到 Canvas 模式的优雅降级。该插件支持三种模式：
- css 模式：使用 filter 属性，默认模式；
- canvas 模式：使用 canvas 导出 base64；
- auto 模式：优先使用 css 模式，否则自动切换到 canvas 模式。
「使用示例」
importblurifyfrom'blurify';
newblurify({
images:document.querySelectorAll('.blurify'),
blur:6,
mode:'css',
});
//orinshorthand
blurify(6,document.querySelectorAll('.blurify'));
「在线示例」
❝
https://justclear.github.io/blurify/
❞
（图片来源：https://justclear.github.io/blurify/）
看到这里是不是有些小伙伴觉得只是模糊处理而已，觉得不过瘾，能不能来点更酷的。嘿嘿，有求必应！阿宝哥立马来个 「“酷炫叼”」 地库 —— midori，该库用于为背景图创建动画，使用 three.js 编写并使用 WebGL。本来是想给个演示动图，无奈单个 Gif 文件太大，只能放个体验地址，感兴趣的小伙伴自行体验一下。
2.3 cropperjs❝
midori 示例地址：https://aeroheim.github.io/midori/
❞
❝
JavaScript image cropper.
https://github.com/fengyuanchen/cropperjs
❞
Cropper.js 是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括 IE9 以上的现代浏览器。它可以用于满足诸如裁剪头像上传、商品图片编辑之类的需求。
Cropper.js 支持以下特性：
- 支持 39 个配置选项；
- 支持 27 个方法；
- 支持 6 种事件；
- 支持 touch（移动端）；
- 支持缩放、旋转和翻转；
- 支持在画布上裁剪；
- 支持在浏览器端通过画布裁剪图像；
- 支持处理 Exif 方向信息；
- 跨浏览器支持。
❝
可交换图像文件格式（英语：Exchangeable image file format，官方简称 Exif），是专门为数码相机的照片设定的文件格式，可以记录数码照片的属性信息和拍摄数据。Exif 可以附加于 JPEG、TIFF、RIFF 等文件之中，为其增加有关数码相机拍摄信息的内容和索引图或图像处理软件的版本信息。
Exif 信息以 0xFFE1 作为开头标记，后两个字节表示 Exif 信息的长度。所以 Exif 信息最大为 64 kB，而内部采用 TIFF 格式。
❞
「使用示例」
//import'cropperjs/dist/cropper.css';
importCropperfrom'cropperjs';
constimage=document.getElementById('image');
constcropper=newCropper(image,{
aspectRatio:16/9,
crop(event){
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
console.log(event.detail.scaleX);
console.log(event.detail.scaleY);
},
});
「在线示例」
❝
https://fengyuanchen.github.io/cropperjs/
❞
❝
JavaScript image compressor.
https://github.com/fengyuanchen/compressorjs
❞
compressorjs 是 JavaScript 图像压缩器。使用浏览器原生的 canvas.toBlob API 进行压缩工作，这意味着它是有损压缩。通常的使用场景是，在浏览器端图片上传之前对其进行预压缩。
在浏览器端要实现图片压缩，除了使用 canvas.toBlob API 之外，还可以使用 Canvas 提供的另一个 API，即 toDataURL API，它接收 type 和encoderOptions 两个可选参数。
其中 type 表示图片格式，默认为 image/png。而 encoderOptions用于表示图片的质量，在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92，其他参数会被忽略。
相比 canvas.toDataURL API 来说，canvas.toBlob API 是异步的，因此多了个 callback 参数，这个 callback 回调方法默认的第一个参数就是转换好的 blob 文件信息。canvas.toBlob 的签名如下：
canvas.toBlob(callback,mimeType,qualityArgument)
「使用示例」
importaxiosfrom'axios';
importCompressorfrom'compressorjs';
//<inputtype="file"id="file"accept="image/*">
document.getElementById('file').addEventListener('change',(e)=>{
constfile=e.target.files[0];
if(!file){
return;
}
newCompressor(file,{
quality:0.6,
success(result){
constformData=newFormData();
//Thethirdparameterisrequiredforserver
formData.append('file',result,result.name);
//SendthecompressedimagefiletoserverwithXMLHttpRequest.
axios.post('/path/to/upload',formData).then(()=>{
console.log('Uploadsuccess');
});
},
error(err){
console.log(err.message);
},
});
});
「在线示例」
❝
https://fengyuanchen.github.io/compressorjs/
❞
