JavaScript의 이미지 처리 및 합성 방법에 대한 자세한 설명

이미지 처리는 이제 우리 삶의 필수품이 되었고, 누구나 이런 필요성을 느끼는 경우가 많을 거라 생각합니다. 실제 프론트엔드 사업에는 이미지 처리와 가공이 필요한 프로젝트가 많은 경우가 많습니다. 지난 기간 회사의 비즈니스 요구로 인해 이 분야에 대한 몇 가지 유용한 정보를 축적해 왔으며, 올해 이후 이를 일련의 기사로 요약하여 여러분과 공유할 수 있기를 바랍니다. 프론트 엔드 어린이 신발에 열심히 노력하는 모든 사람을 도와주세요.

이 시리즈는 다음 4개 부분으로 구성됩니다.

1. 기본형 이미지 처리 기술의 크기 조정 및 자르기

2. 기본형 이미지 처리 기술의 이미지 합성

3. 기본형의 텍스트 합성

4. 알고리즘형 이미지 처리 기술

이러한 축적을 통해 프로젝트에서 일반적으로 사용되는 여러 기능을 캡슐화했습니다.

이미지 합성: 예제 Git 이미지 제거: 예제 Git

匠이런 오래된 루틴에 대해 이야기를 나눈 후 우리는 출발을 시작했습니다!

먼저 프런트 엔드 이미지 처리를 기본 유형과 알고리즘 유형의 두 가지 유형으로 일시적으로 나누겠습니다.

이미지 처리 기술의 기본 유형: 이미지 크기 조정, 회전, 테두리 추가, 이미지 합성, 퍼즐 및 기타 비즈니스는 다음과 같습니다. 모든 기본 유형의 이미지 처리의 차별점은 픽셀 수준의 알고리즘을 사용할 필요가 없고 이미지의 크기와 위치를 계산하여 이미지를 변환한다는 것입니다. 예를 들어 일반적으로 사용되는 스티커 기능은 다음과 같습니다.

알고리즘 유형 이미지 처리: 이 유형의 이미지 처리는 더 복잡하며 픽셀 수준 알고리즘을 사용하여 RGBA 채널 값을 수행하는 것이 특징입니다. 이미지의 픽셀 등. 변환, 예를 들어 photoshop 또는 Meitu Xiuxiu 및 기타 도구를 사용하여 사진에 대한 미화/필터/흑백/컷아웃/흐림 작업을 수행합니다. 주로 알고리즘과 성능 수준에 관한 것입니다. 예를 들어 일반적으로 사용되는 메이크업 기능은 다음과 같습니다. RGBA通道值等进行改造，例如我们使用photshop或者美图秀秀等工具对图片进行的 美颜 / 滤镜 / 黑白 / 抠图 / 模糊等操作，这类型的重点主要在于算法和性能层面。例如常用的妆容功能:

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

• 图片的缩放；

• 图片的裁剪；

• 图片的合成；

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

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

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

1、图片的跨域

首先，图片加载并绘制涉及了图片的跨域问题，因此如果是一张在线的图片，需要在图片服务器上设置跨域头，并且在前端加载图片之前将<img alt="JavaScript의 이미지 처리 및 합성 방법에 대한 자세한 설명" >标签的crossOrigin设置为*，否则绘制到画布的时候会报跨域的错误。

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

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

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

3. crossOrigin值一定要在图片加载之前设置，即为<img alt="JavaScript의 이미지 처리 및 합성 방법에 대한 자세한 설명" >赋值src之前进行设置，否则无效；

2、图片的加载

由于canvas的绘制需要的是已经加载完成的图片，我们需要确保绘制的素材图片是已经加载完成的，因此我们需要使用<img alt="JavaScript의 이미지 처리 및 합성 방법에 대한 자세한 설명" >的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

이것 시리즈는 기본 유형 처리부터 시작하겠습니다. 기본 유형의 이미지 처리는 실제 프로젝트에서 많은 사용 시나리오를 가지고 있으며 주로 캔버스 기능을 사용하여 수행되며 성능 및 호환성 문제가 없으며 온라인 작업 표준을 충족할 수 있습니다. 여기에서는 기본적으로 모든 일상적인 비즈니스 시나리오를 다룰 수 있는 기본 유형의 이미지 처리를 대략적으로 나눕니다.

🎜사진 구성 🎜🎜🎜사진에 스티커, 테두리, 워터마크 등의 구성 🎜

팁: I 이러한 유형의 이미지 처리 시나리오를 기본적으로 모든 유형의 이미지 처리 요구 사항을 충족할 수 있는 플러그인으로 캡슐화했습니다. GIT 주소(토의 환영합니다) 🎜🎜 특정 기능을 소개하기 전에, 이미지 그리기는 이미지 로딩과 관련하여 먼저 몇 가지 사전 지식을 이해해 봅시다. 🎜🎜🎜1. 크로스 도메인 이미지 🎜🎜🎜우선 이미지 로딩 및 그리기에는 이미지의 크로스 도메인 문제가 포함되므로 온라인 이미지인 경우 이미지 서버에 크로스 도메인 헤더를 설정하고 프런트 엔드에 이미지 로드 이전에는 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/cf56c86a64cb807fa8da6a08631d05a1-2.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="JavaScript의 이미지 처리 및 합성 방법에 대한 자세한 설명" > 태그의 crossOrigin이 *로 설정되었습니다. 그렇지 않으면 교차 도메인 오류가 발생했습니다. 캔버스에 그릴 때 보고됩니다. 🎜🎜팁: 여기에는 몇 가지 함정이 있는데 이를 여러분과 공유할 수 있습니다. 🎜🎜🎜🎜crossOrigin은 엄격하게 설정해야 하며 온라인 이미지인 경우에만 설정할 수 있습니다. 로컬 경로 또는 base64를 설정하면 안 됩니다. 그렇지 않으면 일부 시스템에서 오류가 보고되어 이미지 로드에 실패하게 됩니다. 🎜🎜🎜🎜프로젝트가 로컬 패키지 환경인 경우 App에 내장된 경우 crossOrigin 값이 유효하지 않으며 webview의 보안 메커니즘으로 인해 교차 도메인 오류가 보고됩니다. 값이 설정되었는지 여부에 관계없이. 해결 방법은 다음과 같습니다. 올바르게 그리려면 모든 이미지를 base64로 변환해야 합니다. 🎜🎜🎜🎜crossOrigin 값은 이미지가 로드되기 전에 설정되어야 하며, 이는 입니다. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/cf56c86a64cb807fa8da6a08631d05a1-2.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="JavaScript의 이미지 처리 및 합성 방법에 대한 자세한 설명" > src를 할당하기 전에 설정하세요. 그렇지 않으면 🎜🎜🎜🎜🎜2.캔버스 그리기 이후부터 유효하지 않습니다. code>가 이미 필요합니다. 완성된 이미지를 로드하려면 그려진 머티리얼 이미지가 로드되었는지 확인해야 하므로 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/cf56c86a64cb807fa8da6a08631d05a1-2.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="JavaScript의 이미지 처리 및 합성 방법에 대한 자세한 설명" >의 onload 이벤트를 사용해야 합니다. . html 을 사용하거나 js를 사용하여 이미지 개체를 만들 수 있습니다.🎜

🎜

let imgRatio = img.naturalWidth / img.naturalHeight;

// 创建一个画布容器；
let cvs = document.createElement('canvas');

// 获取容器中的画板；
let ctx = cvs.getContext('2d');
cvs.width = 1000;
cvs.height = cvs.width / imgRatio;

🎜 이미지 로딩에 대한 지식, 먼저 가장 간단한 이미지 처리인 확대/축소 및 자르기부터 살펴보겠습니다! 🎜

팁: 이 글을 읽으실 때 캔버스에 대해 잘 모르신다면 해당 API 문서를 확인하시면 될 것 같아요. 더 이상 캔버스를 참조하지 마세요. 기본 API에 대해 자세히 설명하겠습니다. 🎜🎜🎜1. 사진 확대🎜🎜

图片的缩放最常见的场景是做图片的压缩。在保证图片清晰的前提下通过合理地缩小图片尺寸，能大大的降低图片的大小。在实际应用场景中，有着广泛的用途。例如图片上传时，用户自主上传的图片可能是一张非常大的尺寸，例如现在手机所拍摄的照片尺寸经常能达到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.files[0]; 
if(window.FileReader) { 
 let fr = new FileReader(); 
 fr.onloadend = e => {
 let b64 = e.target.result;
 
 // b64即为base64格式的用户上传图;
 }; 
 fr.readAsDataURL(file);
}

对base64的图片使用刚才的canvas方式进行压缩的处理；

Tips: 这里有个小坑是，图片的EXIF信息中的方向值会影响图片的展示，在IOS会出现图片的宽高与图片的方向不匹配的问题，因此需要进行特殊处理，矫正图片的方向。方案:

1、可以使用 exif.js 来获取图片信息中的Orientation属性，利用canvas的旋转绘制来矫正；

2、这里有个 canvasResize.js 插件，可以解决从 File 到 base64 的所有问题。

二、图片的裁剪

在实际项目中，由于图片的宽高比例各式各样，而展示和使用一般需要一个较为固定的比例，此时便需要将图片裁剪成我们需要的宽高比例，使用到的方式其实和图片的缩放基本一致，主要是通过调整 drawImage 的dx, dy参数来实现。原理其实是，将drawImage的绘制起始点(dx, dy)向上偏移，此时由于canvas已被我们设置成期望裁剪后的尺寸，而超出画布的部分不会绘制，从而达到裁剪的目的；通过灵活的设置值，基本可以完成各种图片裁剪需求，简单示例图(黑色框代表创建的画布的尺寸):

此处以需要将一张600*800的长方形图竖直居中裁剪为600*600的正方形图为例, 简单封装成一个功能函数:

// 使用方式：
let b64 = cropImage(img, {
 width : 600,
 height : 600,
});

// 居中裁剪
function cropImage(img, ops){
 // 图片原始尺寸；
 let imgOriginWidth = img.naturalWidth,
 imgOriginHeight = img.naturalHeight;
 
 // 图片长宽比，保证图片不变形；
 let imgRatio = imgOriginWidth / imgOriginHeight;
 
 // 图片裁剪后的宽高， 默认值为原图宽高；
 let imgCropedWidth = ops.width || imgOriginWidth,
 imgCropedHeight = ops.height || imgOriginHeight;
 
 // 计算得出起始坐标点的偏移量, 由于是居中裁剪，因此等于 前后差值 / 2；
 let dx = (imgCropedWidth - imgOriginWidth) / 2,
 dy = (imgCropedHeight - imgOriginHeight) / 2;

 // 创建画布，并将画布设置为裁剪后的宽高；
 let cvs = document.createElement('canvas');
 let ctx = cvs.getContext('2d');
 cvs.width = imgCropedWidth;
 cvs.height = imgCropedHeight;
 
 // 绘制并导出图片；
 ctx.drawImage(img, dx, dy, imgCropedWidth, imgCropedWidth / imgRatio);
 return cvs.toDataURL('image/jpeg', 0.9);
}

三、图片的旋转

图片的旋转的原理同样也是将图片绘制到画布上进行旋转后再导出。其实使用到的是canvas的rotate方法；

let cvs = document.createElement('canvas');
let ctx = cvs.getContext('2d');

// 将参照点移动到画板的中心点；
ctx.translate(ctx.width/2, ctx.height/2);
// 旋转画板；
ctx.rotate = 90;
// 绘制图片；
ctx.drawImage(img);
// 导出得到旋转后的图片；
cvs.toDataURL();

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

解决的方式就是:

将画布容器放大，变成:

上面这个例子中，由于图片是正方形，因此将容器的宽高放大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);

// 导出图片；
...

总结

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

图片处理技术分类；

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

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

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

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

相关推荐：

PHP图片处理之多张图片合成一张的实例

关于微信小程序中图片处理的问题汇总

PHP图片处理类 phpThumb参数用法介绍

위 내용은 JavaScript의 이미지 처리 및 합성 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!