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...

Answer 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.

Answer 2

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.