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

这里有个比较特别的部分，就是这里旋转的是画布的画板部分，并不是整个画布容器，而画布容器外面不会被绘制，因此这里就会出现一个图像四个角被裁剪掉的问题:

解决的方式就是:

将画布容器放大，变成:

上面这个例子中，由于图片是正方形，因此将容器的宽高放大1.5倍便可保证图片不会被裁剪，而现实中的图片由于宽高比例不定，因此这个放大系数是一个动态的值:

Tips: 由于我们将画板基点移动到画布中心了，因此在绘制的时候，要相对于基点调整 dx 与 dy;

// 创建画布，获取画板；
...

// 放大系数为
let iw = img.width, ih = img.height;
let ir = iw > ih ? iw / ih : ih / iw;

cvs.width = iw * ir * 1.5;
cvs.height = ih * ir * 1.5;
// 将参照点移动到画板的中心点；
ctx.translate(cvs.width/2, cvs.height/2);
// 旋转画板；
ctx.rotate = 90;

// 绘制图片；
ctx.drawImage(img, -cvs.width/2, -cvs.height/2);

// 导出图片；
...

总结

本文主要介绍了一些前端图片处理的前置知识:

图片处理技术分类；

基础类型图片处理技术；算法类型图片处理技术； 图片的跨域；图片的加载；

还有讲解了属于基础类型图片处理中最简单的两类:

图片的缩放；图片的裁剪；图片的旋转；

相信大家已经对图片的处理有了个大致的了解了。下篇文章，我们将继续深入研究基础类型中的图片合成，也是各种干货满满，美不胜收。

最后，非常感谢各位童鞋的阅读，有何建议或者疑惑，可以随时与我讨论哈