Встречаются ситуации, когда картинка изображена на черном фоне и требуется сделать его прозрачным для сохранения в PNG. Например, брызги воды, которые невозможно сфотографировать на белом фоне. Дизайнеры для наложения таких слоёв используют в Photoshop метод наложения экран (screen), получая в итоге красивый макет. Но при резке макета на прозрачные PNG возникает неразрешимая проблема с фоном. Вырезать фон из полупрозрачных изображений обводкой и удалением не представляется возможным в Photoshop. Создать в Photoshop нужный α-канал оказалось сложнее, чем написать небольшой скрипт.
Предлагаю метод, реализованный на JavaScript. Реализация алгоритма возможна на любом языке, обладающим библиотекой попиксельной обработки изображений.
Маска прозрачности (α-канал) для каждого пикселя изображения будет формироваться из значений RGB пикселя.
Создадим обычный html файл, с заголовками (transparetbg.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Image glass</title> </head> <body> </body> </html>
Позовём красивую девушку, положив файл girl.jpg в корень диска
<body style="background:url(girl.jpg) right bottom no-repeat">
Добавим кнопки управления в body и canvas
<canvas id="_canvas"></canvas> <div class="btn"> Temperature <input type="range" min="0" max="255" step="1" value="255" id="_temp" onChange="decrunching();"> <button onclick="decrunching('min')">Min</button> <button onclick="decrunching('max')">Max</button> <button onclick="decrunching('avg')">Avg</button> <button onclick="decrunching('r')">R</button> <button onclick="decrunching('g')">G</button> <button onclick="decrunching('b')">B</button> </div>
Добавим в head стиль для кнопок
<style> .btn input { float: left } </style>
Подготовим переменные. Для доступа к пикселям изображения используем canvas. При загрузке страницы загрузится картинка black_problem.jpg из корневой директории с которой мы будем работать. При загрузке методом onload её копия сохранится в переменной original.
<script> var canvas = document.getElementById("_canvas"); var temp = document.getElementById("_temp"); var context = canvas.getContext('2d'); var original; var select_type; window.onload = function () { var i = new Image(); i.onload = function () { canvas.width = i.width; canvas.height = i.height; context.drawImage(i, 0, 0, i.width, i.height); original = context.getImageData(0, 0, i.width, i.height); }; i.src = '/black_problem.jpg'; }; </script>
Напишем функцию обработки изображения
function decrunching(type) { // копируем исходное изображение context.putImageData(original, 0, 0); // создаём новое изображение на основе размеров исходного var newdata = context.createImageData(original); var newpx = newdata.data; //Сохраняем тип алгоритма или используем сохраненный if (type != "") { select_type = type; } else { type = select_type; } // получаем доступ до пикселей изображения var imageData = context.getImageData(0, 0, canvas.width, canvas.height); // считаем количество пикселей изображения var pixels = imageData.data; var len = pixels.length; // организуем цикл для перебора всех пикселей изображения for (var i = 0; i < len; i += 4) { // копируем значение цвета каждого пикселя в переменную и новое изображение (без изменений) let r = newpx[i] = pixels[i]; let g = newpx[i + 1] = pixels[i + 1]; let b = newpx[i + 2] = pixels[i + 2]; // Объявляем переменную для α-канала let rgba; switch (type) { // Рассчитываем прозрачность из значений красного цвета case 'r': rgba = r; break; // Рассчитываем прозрачность из значений зеленого цвета case 'g': rgba = g; break; // рассчитываем прозрачность из значений голубого цвета case 'b': rgba = b; break; // рассчитываем прозрачность из минимальных значений всех цветов case 'min': rgba = r; if (g > r) rgba = g; if (b > g) rgba = b; break; // рассчитываем прозрачность из максимальных значений всех цветов case 'max': rgba = b; if (g < b) rgba = g; if (b < r) rgba = r; break; // рассчитываем прозрачность из средних значений всех цветов default: rgba = ((r + g + b) / 3).toFixed(0); break; } // записываем значение прозрачности пикселя с учетом настройки "температуры прозрачности" newpx[i + 3] = (rgba * temp.value / 255).toFixed(0); } // Выводим на экран новую картинку context.putImageData(newdata, 0, 0); }
Для формирования прозрачности каждого пикселя используются различные методы, но общая суть в формировании значения прозрачности в обратной зависимости от яркости пикселя. Белый пиксель будет полностью непрозрачным. Черный пиксель будет полностью прозрачным. В большинстве случаев подходит метод усреднения значений, т.е. default по коду.
Температура позволяет регулировать порог прозрачности изображения
Поиграемся
Чтобы Chrome разрешил нам работать с локальными изображениями запустим его с нужным ключиком (сделаем ярлык на рабочем столе) и откроем в нем наш html файл.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security"
Нажмём кнопку Avg
Черный фон изображения стал прозрачным. Чудо!
Играя разными алгоритмами, видим незначительные изменения в изображении (для ценителей прекрасного).
Поиграем температурой
Сохраним изображение, кликнув правой кнопкой мышки
Полный листинг программы
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Image glass</title> <style> .btn input { float: left } </style> </head> <body style="background:url(girl.jpg) right bottom no-repeat"> <canvas id="_canvas"></canvas> <div class="btn"> Temperature <input type="range" min="0" max="255" step="1" value="255" id="_temp" onChange="decrunching();"> <button onclick="decrunching('min')">Min</button> <button onclick="decrunching('max')">Max</button> <button onclick="decrunching('avg')">Avg</button> <button onclick="decrunching('r')">R</button> <button onclick="decrunching('g')">G</button> <button onclick="decrunching('b')">B</button> </div> <script> var canvas = document.getElementById("_canvas"); var temp = document.getElementById("_temp"); var context = canvas.getContext('2d'); var original; var select_type; window.onload = function () { var i = new Image(); i.onload = function () { canvas.width = i.width; canvas.height = i.height; context.drawImage(i, 0, 0, i.width, i.height); original = context.getImageData(0, 0, i.width, i.height); }; i.src = '/black_problem.jpg'; }; function decrunching(type) { context.putImageData(original, 0, 0); var newdata = context.createImageData(original); var newpx = newdata.data; if (type != "") { select_type = type; } else { type = select_type; } var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var pixels = imageData.data; var len = pixels.length; for (var i = 0; i < len; i += 4) { let r = newpx[i] = pixels[i]; let g = newpx[i + 1] = pixels[i + 1]; let b = newpx[i + 2] = pixels[i + 2]; let rgba; switch (type) { case 'r': rgba = r; break; case 'g': rgba = g; break; case 'b': rgba = b; break; case 'min': rgba = r; if (g > r) rgba = g; if (b > g) rgba = b; break; case 'max': rgba = b; if (g < b) rgba = g; if (b < r) rgba = r; break; default: rgba = ((r + g + b) / 3).toFixed(0); break; } newpx[i + 3] = (rgba * temp.value / 255).toFixed(0); } context.putImageData(newdata, 0, 0); } </script> </body> </html>
