JavaScript图片处理与合成总结(2)

在介绍具体的功能前，由于图片的绘制完全的依赖于图片的加载，因此先来了解一些前置知识。

1、图片的跨域

首先，图片加载并绘制涉及了图片的跨域问题，因此如果是一张在线的图片，需要在图片服务器上设置跨域头，并且在前端加载图片之前将<img>标签的crossOrigin设置为*，否则绘制到画布的时候会报跨域的错误。

Tips: 这里积累了一些小坑，可以跟大家分享下：

1. crossOrigin需要严格设置，既只有是线上图片时，才设置，而本地路径或者base64时，则一定不能设置，否则在某些系统下会报错，导致图片加载失败；
2. 当项目为本地包环境时，例如内置于 App中时，crossOrigin值无效，webview的安全机制会导致无论该值设置与否，都会报跨域的错误。解决办法是：需要将所有图片转换成base64才能正确绘制；
3. 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。而在项目中，我们可能并不需要用到这么大的尺寸，此时对图片的压缩能大大的优化加载速度和节省带宽；