Revisions to HTML5 Canvas - How to get adjacent pixels position from the linearized imagedata Uint8ClampedArray?

deleted 2 characters in body

Source Link

edited Aug 30, 2017 at 17:20

387.9k
26
367
417

You could calculate the index with the width of the matrix and the length of one unit of 4.

The access is zero based.

function getPos(array, x, y, width) {
    var p = y * width4 * 4(x + xy * 4;width);
    return array.slice(p, p + 4);
}

var array = [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 255, 0, 0, 0, 240, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 241, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ];

// element above
console.log(JSON.stringify(getPos(array, 2, 1, 5))); // [0, 0, 0, 240]

// actual element
console.log(JSON.stringify(getPos(array, 2, 2, 5))); // [0, 0, 0, 255]

// element below
console.log(JSON.stringify(getPos(array, 2, 3, 5))); // [0, 0, 0, 241]

You could calculate the index with the width of the matrix and the length of one unit of 4.

The access is zero based.

function getPos(array, x, y, width) {
    var p = y * width * 4 + x * 4;
    return array.slice(p, p + 4);
}

var array = [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 255, 0, 0, 0, 240, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 241, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ];

// element above
console.log(JSON.stringify(getPos(array, 2, 1, 5))); // [0, 0, 0, 240]

// actual element
console.log(JSON.stringify(getPos(array, 2, 2, 5))); // [0, 0, 0, 255]

// element below
console.log(JSON.stringify(getPos(array, 2, 3, 5))); // [0, 0, 0, 241]

You could calculate the index with the width of the matrix and the length of one unit of 4.

The access is zero based.

function getPos(array, x, y, width) {
    var p = 4 * (x + y * width);
    return array.slice(p, p + 4);
}

var array = [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 255, 0, 0, 0, 240, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 241, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ];

// element above
console.log(JSON.stringify(getPos(array, 2, 1, 5))); // [0, 0, 0, 240]

// actual element
console.log(JSON.stringify(getPos(array, 2, 2, 5))); // [0, 0, 0, 255]

// element below
console.log(JSON.stringify(getPos(array, 2, 3, 5))); // [0, 0, 0, 241]

deleted 163 characters in body

Source Link

edited Aug 30, 2017 at 16:08

Nina Scholz

387.9k
26
367
417

You could calculate the index with the width of the matrix and the length of one unit of 4.

The access is based on values beginning from 1. For zero based access, you could delete the correction of -1 for x and y.

function getPos(array, x, y, width) {
    var p = (y - 1) * width * 4 + (x - 1) * 4;
    return array.slice(p, p + 4);
}

var array = [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 255, 0, 0, 0, 240, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 241, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ];

// element above
console.log(JSON.stringify(getPos(array, 32, 21, 5))); // [0, 0, 0, 240]

// actual element
console.log(JSON.stringify(getPos(array, 32, 32, 5))); // [0, 0, 0, 255]

// element below
console.log(JSON.stringify(getPos(array, 32, 43, 5))); // [0, 0, 0, 241]

.as-console-wrapper { max-height: 100% !important; top: 0; }

You could calculate the index with the width of the matrix and the length of one unit of 4.

The access is based on values beginning from 1. For zero based access, you could delete the correction of -1 for x and y.

function getPos(array, x, y, width) {
    var p = (y - 1) * width * 4 + (x - 1) * 4;
    return array.slice(p, p + 4);
}

var array = [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 255, 0, 0, 0, 240, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 241, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ];

// element above
console.log(getPos(array, 3, 2, 5)); // [0, 0, 0, 240]

// actual element
console.log(getPos(array, 3, 3, 5)); // [0, 0, 0, 255]

// element below
console.log(getPos(array, 3, 4, 5)); // [0, 0, 0, 241]

.as-console-wrapper { max-height: 100% !important; top: 0; }

You could calculate the index with the width of the matrix and the length of one unit of 4.

The access is zero based.

function getPos(array, x, y, width) {
    var p = y * width * 4 + x * 4;
    return array.slice(p, p + 4);
}

var array = [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 255, 0, 0, 0, 240, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 241, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ];

// element above
console.log(JSON.stringify(getPos(array, 2, 1, 5))); // [0, 0, 0, 240]

// actual element
console.log(JSON.stringify(getPos(array, 2, 2, 5))); // [0, 0, 0, 255]

// element below
console.log(JSON.stringify(getPos(array, 2, 3, 5))); // [0, 0, 0, 241]

Source Link

answered Aug 30, 2017 at 15:03

Nina Scholz

387.9k
26
367
417

You could calculate the index with the width of the matrix and the length of one unit of 4.

The access is based on values beginning from 1. For zero based access, you could delete the correction of -1 for x and y.

function getPos(array, x, y, width) {
    var p = (y - 1) * width * 4 + (x - 1) * 4;
    return array.slice(p, p + 4);
}

var array = [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 255, 0, 0, 0, 240, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 241, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ];

// element above
console.log(getPos(array, 3, 2, 5)); // [0, 0, 0, 240]

// actual element
console.log(getPos(array, 3, 3, 5)); // [0, 0, 0, 255]

// element below
console.log(getPos(array, 3, 4, 5)); // [0, 0, 0, 241]

.as-console-wrapper { max-height: 100% !important; top: 0; }

Collectives™ on Stack Overflow

Return to Answer