Обработка и синтез изображений в JavaScript (1)

введение:

Обработка изображений сейчас стала жесткой потребностью в нашей жизни, и я думаю, что потребности в этом отношении часто возникают у каждого. В реальном клиентском бизнесе часто бывает много проектов, требующих обработки и обработки изображений. Из-за деловых потребностей компании в прошедший период времени я накопил некоторые галантереи в этой области, и я обобщу их в серию статей, чтобы поделиться с вами через год, надеясь вдохновить и помочь фронту. -заканчивай детскую обувь своими усилиями~~ ~😃

Эта серия разделена на следующие 4 части:

Масштабирование и кадрирование основных типов методов обработки изображений (портал);
Синтез изображений основных типов технологии обработки изображений (портал);
Текстовый синтез основных видов технологий обработки изображений;
Тип алгоритма Технология обработки изображения (портал);

В статье я упомяну много ям или опытов, встречающихся в реальной практике, которые следует рассматривать как полные сухих товаров ~~ Если вы сможете прочитать ее полностью, это должно значительно улучшить ваше понимание области предварительной обработки изображений. Заинтересованная детская обувь может связаться Я обсудил это подробно, и я надеюсь, что эта статья может добиться эффекта привлечения других, так что интерфейс имеет больше возможностей в обработке изображений.Пожалуйста, простите меня, если есть какие-либо недостатки.

Благодаря этим накоплениям я инкапсулировал несколько функций, обычно используемых в проектах:

Синтез изображения: Example Git

Обрезка изображения: Example Git

Портретный вырез: Example Git

После ворчания этих старых процедур, давайте взлетим! ~~✈️✈️✈️

Прежде всего, фронтальную обработку изображений я пока разделю на два типа:базовый типа такжеТип алгоритма;

Основные виды методов обработки изображений:Масштабирование изображения, поворот, добавление границ, синтез изображения, головоломки и другие сервисы — все это основные виды обработки изображений.Нет необходимости использовать алгоритмы на уровне пикселей, но изменить картину, вычисливразмер и расположениеОжидание преобразования изображения. Например, часто используемые функции стикера:

Алгоритм обработки изображений:Этот тип обработки изображения отличается высокой сложностью и характеризуется обработкой изображения с помощью алгоритмов на уровне пикселей.пиксельпровестиRGBAЗначения канала и т. д. преобразуются, например, мы используемphotshopИли красота / фильтр / черно-белое / вырезание / размытие и другие операции, выполняемые с изображениями такими инструментами, как Meitu Xiuxiu. Основное внимание этого типа уделяетсяАлгоритмы и производительностьуровень. Например, часто используемые функции макияжа:

В этой серии мы начинаем наше путешествие с базовой обработки типов. Базовые виды обработки изображений имеют большое количество сценариев использования в реальных проектах, в основном с использованиемcanvasВозможность завершения, нет проблем с производительностью и совместимостью, может соответствовать стандартам онлайн-операций. Здесь я грубо разделяю основные типы обработки изображений на следующие типы, которые в основном могут охватывать все повседневные бизнес-сценарии:

масштабирование изображения;
обрезка изображений;
композиция картинок;
- Сочетание картинок и рисунков, таких как наклейки, рамки, водяные знаки и т. д.;
- добавлять текст к изображениям;
- Добавьте к изображению базовую геометрию;

Советы: я инкапсулировал этот тип сцены обработки изображений вплагин, который в основном может удовлетворить все потребности этого типа обработки изображений,GIT-адрес(Добро пожаловать для обсуждения);

Прежде чем вводить конкретные функции, поскольку отрисовка изображения полностью зависит от загрузки изображения, давайте сначала изучим некоторые предварительные знания.

1, междоменный

Прежде всего, загрузка и рисунок изображения включают в себя перекрестный доменную проблему изображения, поэтому, если он является онлайн-изображением, вам необходимо установить заголовок кросс-домена на сервере изображения, а перед загрузкой изображения на переднем концеБуду<img>помеченcrossOriginУстановить как*, в противном случае при рисовании на холст будет сообщено о междоменной ошибке.

Советы: Здесь накопилось несколько небольших ям, которыми можно поделиться с вами:

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;
}

После введения предварительных знаний о загрузке изображений, давайте рассмотрим простейшую обработку изображений — масштабирование и обрезку!

Советы: я считаю, что когда вы читаете эту статью, если вы правыcanvasЯ мало что знаю, вы можете проверить соответствующийAPIДокумента достаточно, эта статья уже не актуальнаcanvasОснованиеAPIОбъясните подробно.

Во-первых, масштаб изображения

Наиболее распространенная сцена масштабирования изображения — это создание изображений.компрессия. При условии обеспечения четкости изображения размер изображения может быть значительно уменьшен за счет разумного уменьшения размера изображения. В сценариях практического применения он имеет широкий спектр применения. Например, при загрузке изображения загружаемое пользователем изображение может быть очень большого размера, например, размер фотографий, сделанных мобильными телефонами, часто может достигать1920*2560размер, размер может превышать 5M. В проекте нам может не понадобиться использовать такой большой размер, в это время сжатие изображения может сильно оптимизировать скорость загрузки и сэкономить трафик;

1. Создайте новый`canvas`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 параметра;
- тип: формат изображения, общедоступныйimage/pngилиimage/jpeg, когда изображение не содержит прозрачности, рекомендуется использоватьjpeg, что может значительно уменьшить размер экспортируемого изображения;
Советы: здесь есть яма, я хочу экспортироватьjpgОтформатированные изображения должны использоватьimage/jpeg, нельзя использоватьimage/jpg;
- качество: качество изображения, доступное0~1любое значение между; после тестирования значение устанавливается равным0.9Это более удобно, когда размер файла изображения эффективно уменьшается без ущерба для четкости изображения.base64Оба являются сжатыми изображениями;

// 将原图等比例绘制到缩放后的画布上；
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способ сжатия;

Советы: здесь есть небольшая яма, изображениеEXIFЗначение направления в информации повлияет на отображение изображения, вIOSБудет проблема с аспектом изображения и направлением изображения, поэтому необходимо специально обрабатывать, исправлять направление изображения. строить планы:

1. Можно использоватьexif.jsчтобы получить информацию о картинкеOrientationсвойства, использованиеcanvasПоверните рисунок, чтобы исправить;

2. ЕстьcanvasResize.jsПлагин, который может разрешить отFileприбытьbase64все проблемы.

2. Обрезка изображений

В реальных проектах, поскольку соотношения ширины и высоты изображений различны, а для отображения и использования обычно требуется относительно фиксированное соотношение, в настоящее время изображение необходимо обрезать до требуемого соотношения ширины и высоты. такое же, как и на картинке. Масштабирование в основном такое же, в основном путем регулировки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 раза гарантирует, что изображение не будет обрезано, однако в реальных изображениях соотношение ширины и высоты не является фиксированным, поэтому такое увеличение фактор является динамической величиной:

Советы: Поскольку мы переместили базовую точку монтажной области в центр холста, нам нужно настроить ее относительно базовой точки при рисовании.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);

// 导出图片；
...

Суммировать

В этой статье в основном представлены некоторые предварительные знания о внешней обработке изображений:

Классификация технологий обработки изображений;
- Технология обработки изображений базового типа;
- Технология обработки изображений алгоритмического типа;
междоменное изображение;
загрузка изображения;

Также объясняются два простейших типа обработки изображений, которые относятся к базовому типу:

масштабирование изображения;
обрезка изображений;
поворот картинки;

Я считаю, что у всех есть общее представление об обработке изображений. В следующей статье мы продолжим углубленное изучение синтеза изображений в основных типах, которые также полны различных галантерейных и красивых ~~😂😂😂.

Наконец, большое спасибо за чтение детской обуви.Если у вас есть какие-либо предложения или сомнения, вы можете обсудить со мной в любое время~~