JavaScript array to PNG? - client side

Asked 9/2, 2015 at 8:33 Answered 25/6, 2020 at 3:19

Is there any way converting a 2d array of hex codes to a png image?

The arrays look like this (only much larger)

[
  [
    '#FF0000',
    '#00FF00'
  ],
  [
    '#0000FF',
    '#000000'
  ]
]

From this array, the image should look like this

enter image description here

If the method doesn't work with arrays like this, what type of array will it work with?

Nottinghamshire answered 9/2, 2015 at 8:33 Comment(4)

...And what would such a PNG image look like? What do those arrays of colors represent? – Craggy 9/2, 2015 at 8:36

The first dimension is x and the second dimension is y – Nottinghamshire 9/2, 2015 at 8:42

Sharing your research helps everyone. Tell us what you've tried and why it didn't meet your needs. This demonstrates that you've taken the time to try to help yourself, it saves us from reiterating obvious answers, and most of all it helps you get a more specific and relevant answer! Also see how to ask. As it is right now, this question is too broad, there are too many different answers that could solve this problem. – Scalage 9/2, 2015 at 8:42

You should add if you want a client or server solution and if it's supposed to be a javascript only solution. – Esther 26/6, 2015 at 20:1

If you want to render a PNG client-side, without libraries, you can use the HTML5 Canvas.

Either way, I recommend to stick to a one-dimension array, and store the image’s dimensions. It makes things a lot easier to work with.

var pixels = [ ... ],  // your massive array
    width = 4,         // width in pixels
    height = Math.ceil(pixels.length / width),

    // Create canvas
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    imgData = context.createImageData(width, height);

canvas.height = height;
canvas.width = width;

// fill imgData with colors from array
for(var i = 0; i < pixels.length; i++) {
    // Convert pixels[i] to RGB
    // See https://mcmap.net/q/9259/-rgb-to-hex-and-hex-to-rgb

    imgData[i] = r;
    imgData[i + 1] = g;
    imgData[i + 2] = b;
    imgData[i + 3] = 255; // Alpha channel
}

// put data to context at (0, 0)
context.putImageData(imgData, 0, 0);

// output image
var img = new Image();
img.src = canvas.toDataURL('image/png');

// add image to body (or whatever you want to do)
document.body.appendChild(img);

Alternatively, if you can’t rely on a relatively new feature like this, or simply find this too much work, you can go for Tom’s answer :)

Stocks answered 9/2, 2015 at 8:45 Comment(1)

There are three typos in the code: putImagedata -> putImageData, toDataURL is an function of canvas not of context and in the loop imgData.data needs to be manipulated, in stead of just imgData. – Honduras 16/2, 2017 at 17:25

PNGlib looks helpful. You would have to create a loop similar to their example:

var p = new PNGlib(200, 200, 256);

for (var x = 0; x < 2; x++)
    for (var y = 0; y < 2; y++)
        p.buffer[p.index(x, y)] = p.color(/* your colour */);

document.write('<img src="data:image/png;base64,' + p.getBase64() + '">');

It's difficult to give a more specific example with the information that you've provided, but I think that this is what you're after. You would obviously have to change the x and y limits for different arrays.

Caseinogen answered 9/2, 2015 at 8:38 Comment(0)

You could draw the array of RGB values to a HTML5 canvas object and then get the contents of that canvas using the .toDataURL() canvas method:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <script>
"use strict";

// Here's the image data we want to draw:
var data = [
  ["#FF0000", "#00FF00"],
  ["#FFFF00", "#0000FF"]
];

// First, we need to create a canvas with the same dimensions as the image data:
var canvas = document.createElement("canvas");
canvas.height = data.length;
canvas.width = data[0].length;
//canvas.style.visibility = "hidden";
document.body.appendChild(canvas);

// Now that we have canvas to work with, we need to draw the image data into it:
var ctx = canvas.getContext("2d");
for (var y = 0; y < data.length; ++y) {
  for (var x = 0; x < data[y].length; ++x) {
    ctx.fillStyle = data[y][x];  
    ctx.fillRect(x, y, 1, 1);
  }
}

// Finally, we get the image data using the .toDataURL() canvas method:
console.log(canvas.toDataURL("image/png"));
    </script>
  </body>
</html>

Somersomers answered 9/2, 2015 at 8:42 Comment(0)

Solution for the image stored in 2 dimensional array, with RGB colors as an answer to another question

var img=[[[0,0,0],[0,0,0],[0,0,0],[255,0,0],[0,0,0]],
[[0,0,0],[0,0,255],[0,0,0],[0,0,0],[255,0,0]],
[[0,0,0],[0,0,0],[0,0,0],[0,0,0],[255,0,0]],
[[0,0,0],[0,0,255],[0,0,0],[0,0,0],[255,0,0]],
[[0,0,0],[0,0,0],[0,0,0],[255,0,0],[0,0,0]]];

var pixelSize = 20;
var c = document.createElement("canvas");
c.height = img[0].length * pixelSize;
c.width = img.length * pixelSize;
document.body.appendChild(c);
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);

for (var i = 0; i < img.length; i++) {
    for (var j = 0; j < img[0].length; j++) {
        ctx.fillStyle = "rgb("+img[i][j][0]+","+img[i][j][1]+","+img[i][j][2]+")";
        ctx.fillRect(i*pixelSize, j*pixelSize, pixelSize, pixelSize);
    }
}

console.log(c.toDataURL("image/png"));
var png = document.createElement("img");
png.src = c.toDataURL("image/png");
c.remove();
document.body.appendChild(png);

Aggappe answered 25/6, 2020 at 3:19 Comment(0)

Or use an updated version of pnglib:

https://github.com/IjzerenHein/pnglib-es6

Morphine answered 25/8, 2016 at 10:46 Comment(0)

Recommended topics

Hot tags