Как возможно, чтобы этот алгоритм javascript Gaussian Blur работал?

#javascript #html #algorithm

#javascript #HTML #алгоритм

Вопрос:

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

 var gaussianBlur = function() {
  var data = ctx.getImageData(0,0,canvas.width,canvas.height);
  var px = data.data;
  var tmpPx = new Uint8ClampedArray(px.length);
  tmpPx.set(px);

  for (var i = 0, len= px.length; i < len; i  ) {
     if (i % 4 === 3) {continue;}

     px[i] = ( tmpPx[i] 
          (tmpPx[i - 4] || tmpPx[i])
          (tmpPx[i   4] || tmpPx[i]) 
          (tmpPx[i - 4 * data.width] || tmpPx[i])
          (tmpPx[i   4 * data.width] || tmpPx[i]) 
          (tmpPx[i - 4 * data.width - 4] || tmpPx[i])
          (tmpPx[i   4 * data.width   4] || tmpPx[i])
          (tmpPx[i   4 * data.width - 4] || tmpPx[i])
          (tmpPx[i - 4 * data.width   4] || tmpPx[i])
        )/9;
  };
  // data.data = px;

  ctx.putImageData(data,0,0);
  delete tmpPx;
  btnBlur.removeAttribute('disabled');
  btnBlur.textContent = 'Blur'; }

Эта функция ( gaussianBlur() ) запускается для кнопки html, поэтому при нажатии на нее она обработает изображение, чтобы оно стало размытым, и этот процесс будет повторяться в соответствии с количеством нажатий на кнопку. Часть кода, которую я не понимаю, заключается в том, что когда он завершает цикл for, все математические операции были сохранены в px переменной, но в следующей строке кода ctx.putImageData(data,0,0); эта data переменная не принимает новую измененную переменную px . Итак, мне интересно, как возможно, что холст может отображаться с размытым изображением, если data переменная не изменила свой data компонент (потому data.data = px что, как показано в первых строках gaussianBlur функции).

На мой взгляд, чтобы понять этот код, я бы поставил a data.data = px; после цикла for , с помощью этой строки кода я говорю, что new px будет установлен для data.data переменной. И с ot без этого кода строки алгоритм работает. Поэтому я не понимаю, почему он работает, несмотря data.data на то, что не задается новым px значением. Пожалуйста, помогите мне понять это.

Заранее спасибо

1. px ссылается на то же Uint8ClampedArray , что data.data и ссылки. Все непримитивные типы в javascript являются ссылками.

2. Я не уверен, что это на самом деле размытие по Гауссу, а не просто размытие в рамке?

Ответ №1:

Что происходит, так это то, что px на самом деле это тот же объект, data.data что и, что означает, что все изменения px вступают в силу в объекте, который, по вашему мнению, является просто копией. Посмотрите на этот простой пример:

 // We create an object 'x' with an array of data
var x = {
    data :[ 0, 1]
};

// Assign x.data value to 'p'
var p = x.data;
console.log(p); // [0, 1]
// Then we change one of the array's values to 'Xpto'
p[1] = "Xpto";
// Now look what happened to x.data
console.log(x.data); // [0, "Xpto"]

Вот почему ваш код не работает. px это не копия, это ссылка.