Как вы преобразуете цветное изображение в черно-белое, используя Javascript?

Question

Как преобразовать цветное изображение в черно-белое, используя только Javascript?

И также сделайте его кросс-совместимым в большинстве браузеров, потому что я слышал, что в Internet Explorer есть механизм «фильтра», но другие браузеры его не поддерживают.

Answer 1

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

На этой странице показано, как это сделать с помощью браузеров, поддерживающих Canvas:

http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

Для IE вам нужно использовать фильтры, здесь приведен пример выполнения шкалы серого:

http://www.javascriptkit.com/filters/basicimage.shtml

Answer 2

Этот плагин jquery работает в разных браузерах. Хотя я не проверял это тщательно.

https://github.com/GianlucaGuarini/jQuery.BlackAndWhite

Answer 3

Я бы сделал так, чтобы src для img указывал на серверный PHP-скрипт

напр.,

<img src="http://mysite/grayscale.php?url='...'

Этот скрипт извлекает изображение, запускает некоторый GD-код и возвращает JPG. Нечто подобное

Answer 4

Использование HTML5 Canvas и JavaScript

 ctx.drawImage(img, 0, 0, w, h);

    var imgPixels = ctx.getImageData(0, 0, w, h);
    for(var y = 0; y < imgPixels.height; y++){
     for(var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

Answer 5

Современные браузеры теперь могут делать это в CSS - на любом элементе HTML, а не только на изображениях. В сочетании со старым filter CSS в IE вы можете получить довольно хорошую совместимость:

image.grayscale {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}

OP указывает «только JavaScript», но также упоминает, что IE filter будет приемлемым, если бы он был более широко поддержан, каковым он сейчас (эффективно), поэтому я считаю, что это лучшее решение в 2015 году. есть JavaScript:

element.style.filter = 'grayscale(1)';

Источники:

• Поддержка браузера
• Spec
• Учебник

Answer 6

Я обнаружил, что это решение (http://spyrestudios.com/html5-canvas-image-effects-black-white/) довольно хорошо работает вне IE, для которого, как отмечали другие, вам понадобятся фильтры.

Answer 7

я думаю, что этот код будет работать идеально, без необходимости использования вложенных циклов или каких-либо дополнительных библиотек

var image = document.getElementById("image");

var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");

canvas.width= image.width;
canvas.height= image.height;

ctx.drawImage(image,0,0);

var imageData=ctx.getImageData(0,0, image.width, image.height);

for (var i=0;i<imageData.data.length;i+=4) {
    var avg = (imageData.data[i]+imageData.data[i+1]+imageData.data[i+2])/3;

    imageData.data[i] = avg;
    imageData.data[i+1] = avg;
    imageData.data[i+2] = avg;

}

ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
document.getElementById("grayscale").appendChild(canvas);

Answer 8

Некоторые фильтры изображений доступны в CSS и поддерживаются всеми основными браузерами, но вы можете иметь гораздо больше возможностей, используя HTML5 Canvas и Javascript.

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

Примеры:

• fabric.js
• Processing.js
• MarvinJ

В приведенных ниже примерах я использовал MarvinJ.

Загрузка изображения:

image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

Шкала серого:

Marvin.grayScale(image.clone(), image);

Черно-белый:

Marvin.blackAndWhite(image.clone(), image, 5);

Черно-белый 2:

Marvin.blackAndWhite(image.clone(), image, 40);

Полутона:

Marvin.halftoneErrorDiffusion(image.clone(), image);

Пример выполнения:

var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

function imageLoaded(){
	// GrayScale
	//Marvin.grayScale(image.clone(), image);
	//image.draw(canvas);
	
	// Black and White
	Marvin.blackAndWhite(image.clone(), image, 5);
	image.draw(canvas);
	
	// Black and White 2
	//Marvin.blackAndWhite(image.clone(), image, 40);
	//image.draw(canvas);
	
	// Error Diffusion
	//Marvin.halftoneErrorDiffusion(image.clone(), image);
	//image.draw(canvas);
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answer 9

Canvas - действительно лучшее решение этой проблемы на стороне клиента, и я просто хотел отметить, что для IE вы действительно можете использовать проект google exCanvas, который переводит команды canvas в проприетарный векторный язык на основе Microsoft XML, VML.

http://excanvas.sourceforge.net/