Canvas getImageData (). Данные возвращают половину изображения

1

Я пытаюсь создать пикселированный холст из источника изображения, но есть странное поведение функции getImageData() - на изображениях, которые выше моего холста, я продолжаю получать только данные максимальной высоты [квадрат max-height * max -рост]. есть что-то, чего я здесь не хватает?

function generatePixels(){
    const pixel_size = 10;
    const x = 0; const y = 0;
    const w = temp_ctx.canvas.width;
    const h = temp_ctx.canvas.height;

    let min_width = w,
    min_height = h,
    max_width = 0, max_height = 0;

    for (var j = y; j < (y+h); j += pixel_size) {
        for (var i = x; i < (x+w); i += pixel_size) {

            // get current pixel image data (x,y,10,10);
            var data = temp_ctx.getImageData(j, i, pixel_size, pixel_size).data;

            // draw pixel on rendered canvas 
            rendered_ctx.fillStyle = '#' + (data[2] | (data[1] << 8) | (data[0] << 16) | (1 << 24)).toString(16).slice(1);
            rendered_ctx.fillRect((j + pixel_size), (i + pixel_size), 10, 10);

      }
    }
}

Здесь вы можете найти пример кода: https://codepen.io/AceDesigns/pen/dZEmjZ

  • 0
    Пока не смотрите внимательно, но не вызывайте getImageData несколько раз на небольших поверхностях, вызывайте его один раз и повторяйте результаты. getImageData - одна из самых тяжелых операций, доступных в ctx2d API.
  • 1
    Вы используете j в качестве переменной y в начале цикла, но используете его для x внутри него, Хмммм!
Показать ещё 5 комментариев
Теги:
canvas

1 ответ

0

Ниже приведен код работоспособности. Проблема заключается в условии цикла цикла.

для (var j = y; j <(y + h); j + = pixel_size) {для (var я = x; я <(x + w); я + = pixel_size) {

Ещё вопросы

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