Лучший способ получить доступ к пикселям изображения в JavaScript для обработки изображений?

Question

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

Есть ли другой способ получить пиксели изображения без использования элемента canvas?

Answer 1

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

Если вы хотите, чтобы ваш код был аппаратно ускорен, ваш код должен быть скомпилирован во что-то, что выполняется в GPU и имеет доступ к графической памяти. Подход Flash и Silverlight представляет язык затенения, такой как AGAL и HLSL. Возможно, в будущем у JavaScript будет что-то подобное.

Поэтому я предлагаю выполнить обработку изображения с помощью:

1. Технология на стороне сервера
2. Вспышка и Silverlight с языком затенения

Answer 2

У меня нет большого опыта работы с Javascript, но Макс Новакович (@betamax) написал хороший крошечный плагин jQuery под названием $. GetImageData , который может быть полезен.

Подробнее о $. GetImageData можно прочитать в блоге тревожных и на странице плагина

Вы должны иметь возможность доступа к пикселям через что-то вроде context.getImageData(x, y, width, height).data.

Кроме того, вы упомянули аппаратное ускорение, которое должно быть доступно в Firefox4 и Chrome. Shadertoy использует шейдеры GLSL в браузере:

Answer 3

В приведенном ниже примере используется MarvinJ .Он берет цветное изображение с разрешением 2800x2053, перебирает каждый пиксель, вычисляет значение серого и возвращает его обратно.Над холстом есть div для печати времени обработки.На моей машине это заняло 115мс , включая загрузку изображения.

var time = new Date().getTime();

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

function imageLoaded(){
 
  for(var y=0; y<image.getHeight(); y++){
    for(var x=0; x<image.getWidth(); x++){
       var r = image.getIntComponent0(x,y);
       var g = image.getIntComponent1(x,y);
       var b = image.getIntComponent2(x,y);
       
       var gray = Math.floor(r * 0.21 + g * 0.72 + b * 0.07);
       
       image.setIntColor(x,y,255,gray,gray,gray);
     }
   }
   image.draw(canvas);
   
   $("#time").html("Processing time: "+(new Date().getTime()-time)+"ms");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<div id="time"></div>
<canvas id="canvas" width="2800" height="2053"></canvas>

Answer 4

Я не уверен, но возможно ли записать данные изображения в виде строки и манипулировать строкой, а затем перевести ее обратно в изображение, прежде чем показывать полученное изображение?

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

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

У меня нет опыта работы с изображениями, но теоретически нет причин, по которым данные файла не могли бы 'быть записан в строку.Это просто, опять же, собирается сделать очень длинную строку и иметь возможное влияние ОЗУ из-за этого, потому что строка может занимать больше ОЗУ, чем сам файл образа.Но загрузка будет быстрее, так как ему не нужно обрабатывать данные так, как при рисовании на холст.