引言
图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求，让我在这方面积累了一些干货，趁着年后这段时间总结成一系列文章与大家分享，希望能对各位努力中的前端童鞋带来启发和帮助
本系列分成以下4个部分:
基础类型图片处理技术之缩放与裁剪；
基础类型图片处理技术之图片合成；
基础类型图片处理技术之文字合成；
算法类型图片处理技术；
通过这些积累，我封装了几个项目中常用的功能：
图片合成: Example Git 图片裁剪: Example Git 人像抠除: Example Git
唠叨完这些老套路后，我们开始起飞！
首先，我这里将前端图片处理暂且分成两种类型：基础类型 与 算法类型；
基础类型的图片处理技术: 图片缩放，旋转，添加边框，图片合成，拼图等业务都属于基础类型的图片处理，其区分点在于无需使用像素级别的算法，而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:
算法类型的图片处理: 这类型的图片处理复杂度较高，特点是通过像素级别算法对图片的像素点进行RGBA通道值等进行改造，例如我们使用photshop或者美图秀秀等工具对图片进行的 美颜 / 滤镜 / 黑白 / 抠图 / 模糊等操作，这类型的重点主要在于算法和性能层面。例如常用的妆容功能:
本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景，主要是运用canvas的能力来完成，不存在性能和兼容性问题，能够达到线上运行标准。我这里将基础类型的图片处理大致的分成以下几种类型，这些类型基本能覆盖日常所有业务场景：
图片的缩放；
图片的裁剪；
图片的合成；
图片与图片的合成，例如贴纸，边框，水印等；为图片添加文字；为图片添加基础几何图形；
Tips: 我已将该类型的图片处理场景封装成了一个插件，基本上能应付所有这类型图片处理的需求，GIT地址 (欢迎探讨);
在介绍具体的功能前，由于图片的绘制完全的依赖于图片的加载，因此先来了解一些前置知识。
1、图片的跨域
首先，图片加载并绘制涉及了图片的跨域问题，因此如果是一张在线的图片，需要在图片服务器上设置跨域头，并且在前端加载图片之前将<img>标签的crossOrigin设置为*，否则绘制到画布的时候会报跨域的错误。
Tips: 这里积累了一些小坑，可以跟大家分享下：
crossOrigin需要严格设置，既只有是线上图片时，才设置，而本地路径或者base64时，则一定不能设置，否则在某些系统下会报错，导致图片加载失败；当项目为本地包环境时，例如内置于
App中时，crossOrigin值无效，webview的安全机制会导致无论该值设置与否，都会报跨域的错误。解决办法是：需要将所有图片转换成base64才能正确绘制；crossOrigin值一定要在图片加载之前设置，即为<img>赋值src之前进行设置，否则无效；
2、图片的加载
由于canvas的绘制需要的是已经加载完成的图片，我们需要确保绘制的素材图片是已经加载完成的，因此我们需要使用<img>的onload事件，可以使用html中已存在的图片，或者用js创建一个图片对象:
function loadImage(image, loader, error){
// 创建 image 对象加载图片；
let img = new Image();
// 当为线上图片时，需要设置 crossOrigin 属性；
if(image.indexOf('http') == 0)img.crossOrigin = '*';
img.onload = () => {
loaded(img);
// 使用完后清空该对象，释放内存；
setTimeout(()=>{
img = null;
},1000);
};
img.onerror = () => {
error('img load error');
};
img.src = image;
}介绍图片加载的前置知识后，我们先来看最简单的图片处理---缩放与裁剪！
Tips: 相信大家阅读本文时，如果对canvas不太了解，可以查询下对应的API文档即可，本文不再对canvas基础API做详细讲解。
一、图片的缩放
图片的缩放最常见的场景是做图片的压缩。在保证图片清晰的前提下通过合理地缩小图片尺寸，能大大的降低图片的大小。在实际应用场景中，有着广泛的用途。例如图片上传时，用户自主上传的图片可能是一张非常大的尺寸，例如现在手机所拍摄的照片尺寸经常能达到1920*2560的尺寸,大小可能超过5M。而在项目中，我们可能并不需要用到这么大的尺寸，此时对图片的压缩能大大的优化加载速度和节省带宽；
1、新建一个canvas画布，将宽高设置为需要压缩到的尺寸;
该画布既为图片缩放后的尺寸，此处有个点是需要保证图片的比例不变, 因此需要通过计算得出画布的宽与高：
let imgRatio = img.naturalWidth / img.naturalHeight;
// 创建一个画布容器；
let cvs = document.createElement('canvas');
// 获取容器中的画板；
let ctx = cvs.getContext('2d');
cvs.width = 1000;
cvs.height = cvs.width / imgRatio;2、将图片画入后再导出成base64;
这里使用2个最常用的方法:
ctx.drawImage(image, dx, dy, dw, dh): 这个方法其实最多可以接收9个参数, 实现压缩，只需要使用其中的5个参数即可, 其余参数在其它部分使用到时再做详解；
image : 需要绘制的图片源，需要接收已经 加载完成 的HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement； dx / dy : 相对于画布左上角的绘制起始点坐标； dw / dh : 绘制的宽度和高度，宽高比例并不锁定，可使图片变形；
cvs.toDataURL(type, quality): 该方法用于将画布上的内容导出成 base64 格式的图片，可配置2个参数；
type: 图片格式, 一般可以使用 image/png 或者 image/jpeg, 当图片不包含透明时，建议使用jpeg，可使导出的图片大小减小很多； quality: 图片质量，可使用0~1之间的任意值；经过测试，该值设置成0.9时较为合适，可以有效减小图片文件大小且基本不影响图片清晰度，导出后的 base64 既为压缩后的图片；
Tips: 此处有个坑, 想导出jpg格式的图片必须用image/jpeg，不能使用image/jpg；
// 将原图等比例绘制到缩放后的画布上；
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
// 将绘制后的图导出成 base64 的格式；
let b64 = cvs.toDataURL('image/jpeg', 0.9);3.多种格式的图片转换成base64;
我们常用的图片上传功能，我们使用的是原生的<input type="file">标签，此时获取到的是File格式的图片，图片的格式各异且尺寸很大，我们应该压缩处理后再使用。
使用FileReader:
let file = e.