Javascript Image from Array

Question

Is it possible to generate an Image from an Array with Hex Codes and if yes how?

This Array: ["#ffffff", "#ff0000", "#ffff00"]

Would output an Image where the first pixel has the color: "#ffffff", the second: "#ff0000", the third: "#ffff00" and so on...

My Method was to create a ton of div elements that all had diffrent background-colors, but if you have a huge array thats really slow...

My method looks something like this:

var index;
for (index = 0; index < array.length; index++) {
    var indexx;
    $("container").append("<div style='background-color: " + array[length] + "; position: absolute; top: 0; left: " + index + ";'></div>");
}

What i need is something like this: http://jsfiddle.net/Evilzebra/9xnn8tw5/ But with colors aswell...

Edit:

//create some random data for example
var data = [];
for(var i = 0, l = 1000000; i < l; i++){
    data.push(Math.round(Math.random()*255));
}

var image = document.getElementById('i');
//display image only after it's loaded
image.onload = function(){this.style.display='block'}.bind(image);
//and finally set the .src
image.src = dataToBase64(data, 1000, 1000);

function dataToBase64(colors, width, height){
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        color;
    //setup canvas
    canvas.width = width,
    canvas.height = height;
    //grab data
    var data = ctx.getImageData(0, 0, width, height),
        _data = data.data; //simple speed optimization    
    //place data
    for(var i = 0, l = _data.length; i < l; i+3){

        _data[i] = colors[i],
        _data[i+1] = color[i+1],
        _data[i+2] = color[i+2],
        _data[i+3] = 255;
    }
    ctx.putImageData(data, 0, 0);
    //return base64 string
    return canvas.toDataURL();
}

Should give the pixels random colors... but it doesnt works...

See the fiddle above and paste the code there...

This is what canvas is for. You can target each pixel individually. PS the size of the array probably wasn't causing the slowdown; the number of elements you were probably trying to place on the page was. I've used canvas to create images from a large array of pixel colours and it's very fast. — Andy
– Andy, Commented Dec 1, 2017 at 17:58
What i need is something like this: jsfiddle.net/Evilzebra/9xnn8tw5 But with colors aswell... Could you show me how to do it? I know nothing about canvas... — Milan
– Milan, Commented Dec 1, 2017 at 18:05
Why don't you read the documentation that Alex included in his comment, try some code, and come back if you have any problems? — Andy
– Andy, Commented Dec 1, 2017 at 18:15

Potter · Accepted Answer · 2017-12-01 20:56:45Z

The problem with your canvas example is that you used the same random value for red, green, and blue (RGB) for an individual pixel. When RGB are all the same you get a shade of gray. All you need to do is have different values for RGB and you'll get random colors in your demo. see fiddle below.

fiddle

In order to use this with your original example of an array of hex colors, you just need to translate those colors into their equivalent rgb values.

you can get a really well thought out hex code translator elsewhere, but here is a quick and dirty one that'll work for demo purposes:

function translateHexColor(hexColor) {
  const red = parseInt(hexColor.substring(1, 3), 16)
  const green = parseInt(hexColor.substring(3, 5), 16)
  const blue = parseInt(hexColor.substring(5, 7), 16)

  return { red, green, blue }
}

edit: My answer is based on your fiddle. The canvas version above doesn't work because your for loop doesn't actually change the value of i. there is also something weird going on with fiddle and scoping that I didn't track down. the fiddle I posted works though.

simbathesailor · Accepted Answer · 2017-12-01 19:34:57Z

1

var hex=["#ffffff", "#ff0000", "#ffff00"]
function randomize(rangeLower, rangeUpper) {
  var t= (Math.random() * (rangeUpper-rangeLower))+rangeLower
  return Math.floor(t)
}

var testContainer= document.getElementById("test")
for (var i =0; i< 100; i++) {
  for(var j=0; j< 100;j++) {
    var t= document.createElement("div")
    t.style.backgroundColor= hex[randomize(0,2)]
    t.style.left=j + "px"
    t.style.top=i+"px"
    testContainer.appendChild(t)
  }
}

#test {
  position: relative;
}
#test div {
  position: absolute;
  height: 2px;
  width: 2px;
}

<div id="test">
 
</div>

Hey I tried this , may be it can help.

answered Dec 1, 2017 at 19:34

simbathesailor

3,6852 gold badges22 silver badges30 bronze badges

2 Comments

Milan Over a year ago

This works great too, but the problem with divs is, that its very slow...

simbathesailor Over a year ago

Yes i know, i have not worked with canvas. i will look into that

Collectives™ on Stack Overflow

Javascript Image from Array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related