Как преобразовать цветное изображение в черно-белое с помощью Javascript?

Ответ 1

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

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

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

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

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

Ответ 2

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

например.

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

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

Ответ 3

Этот плагин jquery, похоже, работает с перекрестным браузером. Я не тестировал это, хотя.

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

Ответ 4

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

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
• Учебник

Ответ 5

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

Ответ 6

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

http://excanvas.sourceforge.net/

Ответ 7

Использование холста HTML5 и 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);

Ответ 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);

Runnable Example:

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>

Ответ 9

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

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