Как убрать каждый второй пиксель с холста HTML5?

0

Я уже создаю код jsfiddle.net/NHj2t для изображения downsample, но у меня есть одна проблема: на холсте у меня есть дубликат изображения, и я не понимаю, почему - пожалуйста, объясните мне.

function downsample(srcImageData, width, height) {
   var backContext = document.createElement('canvas').getContext('2d');
   var result = backContext.createImageData(width, height);
   var d = 0;
   for (var p = 0; p < srcImageData.data.length; p += 8) {
        result.data[d] = srcImageData.data[p];
        result.data[d + 1] = srcImageData.data[p + 1];
        result.data[d + 2] = srcImageData.data[p + 2];
        result.data[d + 3] = srcImageData.data[p + 3];
        d += 4;
   }
   srcImageData = result;
   return srcImageData;
}

Как удалить каждый второй пиксель с холста?

Я хочу уменьшить изображение. Я пытаюсь реализовать Gaussian Pyramid в JavaScript info 1

Я не очень хорошо понимаю английский.

  • 0
    Почему отрицательные голоса?
Теги:
html5-canvas

2 ответа

2
Лучший ответ

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

var backContext = document.createElement('canvas').getContext('2d');
var skip = 2;
var result = backContext.createImageData(width/skip, height/skip);
var d = 0;
for (var y = 0; y < height; y += skip) {
    for (var x = 0; x < width; x += skip) {
        for (var c = 0; c < 4; c++) {
            result.data[d++] = srcImageData.data[(y*width+x)*4+c];
        }
    }
}

Обновленная скрипка: http://jsfiddle.net/NHj2t/2/

Поделиться
1

Вы в основном создаете две чередующиеся версии исходного изображения, одну нечетную строку и одну четную линию.

Пропуская 2 пикселя в источнике, вы будете рисовать только половину строк, где один "отстает", в результате чего две линии бок о бок (каждая другая строка, следовательно, "чередуется"). Если вы захотите этого с помощью пиксельной итерации, вам нужно вычислить и рассмотреть вертикальную позицию.

Почему бы не использовать drawImage для пробоподготовки изображения?

context.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5);

Это нарисует ваше изображение размером 50%.

Модифицированная скрипка здесь

Поделиться
  • 0
    Почему бы не использовать drawImage, чтобы уменьшить изображение? - потому что я не знаю, как это - хорошо это или нет для алгоритма - может быть, все в порядке, но я каждый раз вижу информацию об удалении каждых четных строк и столбцов (изображений, представленных в матричной форме), или об удалении каждого второго пикселя
  • 0
    @ 452 Удаление всех остальных пикселей - это просто субвыборка. Вы не получите размытия или низкочастотной фильтрации. Используя встроенный drawImage, вы по крайней мере достигнете формы «размытия» в виде интерполированных пикселей. Если вы хотите использовать только подвыборку, вам сначала нужно предварительно отфильтровать (размытие по Гауссу) изображение.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню