时间戳

首页 > 解决方案 > updatePixels() 实际上并未更新像素

javascript - updatePixels() 实际上并未更新像素

问题描述

我正在尝试制作一个接受字符串的程序，将其转换为base64，然后再转换为二进制。然后它采用二进制并将像素更改为 0 的黑色像素和 1 的白色像素。

我已经将像素数组更改为我想要的，但是当我调用updatePixels().

我的目标是获取画布并将其导出为图像。

我的草图：

let hw;
let input, button;
let binaryOut;

function setup() {
    createCanvas(140,140);
    input=createInput();
    pixelDensity(1);

    button = createButton("get image");
    button.mousePressed(txtTo64ToBin)

    loadPixels();
}

function txtTo64ToBin(){
    str = input.value();
    str = btoa(str);
    let output = '';
    str = str.split("")
    for(let i=0;i<str.length;i++){
        let base = str[i].charCodeAt(0).toString(2) 
        while(base.length < 8){
            base = "0"+base;
        }
        output += base;
    }
    binaryOut = output;
    console.log(binaryOut)
    updateImage(binaryOut.split(''))
}

function updateImage(binArr){
    hw = factors(binArr.length);
    hw = hw[hw.length-1];
    console.log(hw);
    resizeCanvas(...hw,false)
    pixels = []
    for(let i=0; i<binArr.length; i++){
        pixels[i*4] = map(binArr[i],0,1,0,255);
        pixels[i*4+1] = map(binArr[i],0,1,0,255);
        pixels[i*4+2] = map(binArr[i],0,1,0,255);
        pixels[i*4+3] = 255;
    }
    console.log(pixels)
    updatePixels() //here is the updatePixels function call
}

function draw() {
    noLoop();

}

function factors(num) {

    var half = Math.floor(num / 2),
        arr = [],
        i, j;


    num % 2 === 0 ? (i = 2, j = 1) : (i = 3, j = 2);

    for (i; i <= half; i += j) {
        if(num % i === 0 && i <= num/i){
            arr.push([i,num/i]);
        }
    }
    return arr;
}

我很困惑，任何帮助将不胜感激。

标签： javascriptp5.js

解决方案

请尝试将您的问题分解为更小的步骤，并在更小的示例中隔离问题。

这是一个显示相同问题的示例草图：


let button;

function setup() {
    createCanvas(140,140);

    button = createButton("test");
    button.mousePressed(updateImage);

    loadPixels();
}

function updateImage(){
    pixels = [];
    for(let i=0; i < width * height; i++){
        pixels[i*4] = 255;
        pixels[i*4+1] = 0;
        pixels[i*4+2] = 0;
        pixels[i*4+3] = 255;
    }
    updatePixels();
}

function draw() {
    noLoop();
}

当我们单击按钮时，我们可能希望这会使画布变红，但事实并非如此。看看这个例子如何更容易玩，因为我们不必考虑你的任何逻辑？

无论如何，问题是由这一行引起的：

 pixels = [];

去掉那条线，示例程序就可以工作了。

我的猜测是这是因为pixels它不是标准的 JavaScript 数组。从参考：

Uint8ClampedArray包含显示窗口中所有像素的值。

...

请注意，这不是标准的 javascript 数组。

推荐阅读