JS中图片处理与合成的示例分析

　　

这篇文章给大家分享的是有关JS中图片处理与合成的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

引言

图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求，让我在这方面积累了一些干货，趁着年后这段时间总结成一系列文章与大家分享，希望能对各位努力中的前端童鞋带来启发和帮助

本系列分成以下4个部分:

  1. 基础类型图片处理技术之缩放与裁剪；

  2. 基础类型图片处理技术之图片合成；

  3. 基础类型图片处理技术之文字合成；

  4. 算法类型图片处理技术；

通过这些积累，我封装了几个项目中常用的功能：

图片合成: Example Git 图片裁剪: Example Git 人像抠除: Example Git

唠叨完这些老套路后，我们开始起飞！

首先，我这里将前端图片处理暂且分成两种类型：基础类型 与 算法类型；

基础类型的图片处理技术: 图片缩放，旋转，添加边框，图片合成，拼图等业务都属于基础类型的图片处理，其区分点在于无需使用像素级别的算法，而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:

JS中图片处理与合成的示例分析

算法类型的图片处理: 这类型的图片处理复杂度较高，特点是通过像素级别算法对图片的像素点进行RGBA通道值等进行改造，例如我们使用photshop或者美图秀秀等工具对图片进行的 美颜/滤镜/黑白/抠图/模糊等操作，这类型的重点主要在于算法和性能层面。例如常用的妆容功能:

JS中图片处理与合成的示例分析

本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景，主要是运用canvas的能力来完成，不存在性能和兼容性问题，能够达到线上运行标准。我这里将基础类型的图片处理大致的分成以下几种类型，这些类型基本能覆盖日常所有业务场景：

  • 图片的缩放；

  • 图片的裁剪；

  • 图片的合成；

图片与图片的合成，例如贴纸，边框，水印等；为图片添加文字；为图片添加基础几何图形；

Tips: 我已将该类型的图片处理场景封装成了一个插件，基本上能应付所有这类型图片处理的需求，GIT地址 (欢迎探讨);

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

1、图片的跨域

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

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

  1. crossOrigin需要严格设置，既只有是线上图片时，才设置，而本地路径或者base64时，则一定不能设置，否则在某些系统下会报错，导致图片加载失败；

  2. 当项目为本地包环境时，例如内置于 App中时，crossOrigin值无效，webview的安全机制会导致无论该值设置与否，都会报跨域的错误。解决办法是：需要将所有图片转换成base64才能正确绘制；

  3. crossOrigin值一定要在图片加载之前设置，即为赋值src之前进行设置，否则无效；

2、图片的加载

由于canvas的绘制需要的是已经加载完成的图片，我们需要确保绘制的素材图片是已经加载完成的，因此我们需要使用的onload事件，可以使用html中已存在的图片，或者用js创建一个图片对象:

function loadImage(image, loader, error){
　　,//创建,image 对象加载图片;
　　,let  img =, new 图像();
　　,
　　,//当为线上图片时,需要设置,crossOrigin 属性;
　　,如果(image.indexOf (& # 39; http # 39;),==, 0) img.crossOrigin =, & # 39; * & # 39;;
　　,img.onload =,(),=祝辞,{
　　,加载(img);
　　,//大敌;使用完后清空该对象,释放内存;
　　,setTimeout(()=祝辞{
　　时间=img 才能;零;
　　},1000);
　　,};
　　,img.onerror =,(),=祝辞,{
　　,错误(& # 39;img  load 错误# 39;);
　　,};=,img.src 形象;
　　}
JS中图片处理与合成的示例分析