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
If the method doesn't work with arrays like this, what type of array will it work with?
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
If the method doesn't work with arrays like this, what type of array will it work with?
Share Improve this question edited Jun 27, 2015 at 8:27 Indiana Kernick asked Feb 9, 2015 at 8:33 Indiana KernickIndiana Kernick 5,3312 gold badges24 silver badges56 bronze badges 4- ...And what would such a PNG image look like? What do those arrays of colors represent? – CodingIntrigue Commented Feb 9, 2015 at 8:36
- The first dimension is x and the second dimension is y – Indiana Kernick Commented Feb 9, 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. – Cerbrus Commented Feb 9, 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. – adius Commented Jun 26, 2015 at 20:01
5 Answers
Reset to default 10If 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 http://stackoverflow.com/questions/5623838/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 :)
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.
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>
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);Or use an updated version of pnglib:
https://github.com/IjzerenHein/pnglib-es6