Нужно манипулировать пикселями, извлеченными из изображения, я использую p5.js и реагировать - PullRequest
Новая
       6

Нужно манипулировать пикселями, извлеченными из изображения, я использую p5.js и реагировать

0 голосов
/ 26 октября 2019

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

Я заметилтем не менее, если я изменю свойство высоты холста с 480 до ... idk ... 1400 ++, я получу больше пикселей, поэтому, в конечном итоге, если установить высоту 5000, я получу все изображение ...

Пытался предварительно загрузить изображение на всякий случай, но на самом деле изображение импортируется с моего компьютера. import lady from "./Ladies.jpg"

renderFourth = React.createRef()
componentDidMount() {
    this.sketch = new p5 (p =>{

        var pic;


        p.preload = () =>{
            pic = p.loadImage(lady);
        }

        p.setup = () => {
            p.createCanvas(612,480).parent(this.renderFourth.current)                
        }

        p.draw = () => {
            p.loadPixels();
            pic.loadPixels();
            for(let x = 0; x < p.width; x++){
                for(let y = 0; y < p.height; y++){
                    let loc = (x + y * p.width);
                    p.pixels[loc] = pic.pixels[loc];
                }

            }                
            p.updatePixels();
        }
    })
}

render() {
    return (<div ref={this.renderFourth}></div>)
}

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

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

1 Ответ

0 голосов
/ 30 октября 2019

Массив пикселей , полученный с помощью getPixels(), сохраняет информацию в формате RGBA, где каждый из каналов хранится последовательно в одной позиции в массиве, что означает, что без взятия pixelDensity Учтите, что массив в 4 раза «больше», чем исходный. Это также объясняет, почему вы получаете полное изображение только при использовании «астрономически высокого» числа.

Попробуйте: 

for(let x = 0; x < p.width; x++){
  for(let y = 0; y < p.height; y++){
    let loc = (x + y * p.width)*4;
    p.pixels[loc] = pic.pixels[loc]; //R
    p.pixels[loc + 1] = pic.pixels[loc + 1]; //G
    p.pixels[loc + 2] = pic.pixels[loc + 2]; //B
    p.pixels[loc + 3] = pic.pixels[loc + 3]; //A
  }
}
...