来自数组的 Javascript 图像

Question

是否可以使用十六进制代码从数组生成图像，如果可以，如何？

这个数组：["#ffffff", "#ff0000", "#ffff00"]

将输出一个图像，其中第一个像素的颜色为：“#ffffff”，第二个：“#ff0000”，第三个：“#ffff00”，依此类推...

我的方法是创建大量具有不同背景颜色的 div 元素，但如果你有一个巨大的数组，那真的很慢......

我的方法看起来像这样：

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>");
}

我需要的是这样的：http://jsfiddle.net/Evilzebra/9xnn8tw5/ 但还有颜色......

编辑：

//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();
}

应该给像素随机颜色...但它不起作用...

查看上面的小提琴并将代码粘贴到那里...

Answer 1

您的画布示例的问题在于，您对单个像素使用了相同的随机值来表示红色、绿色和蓝色 (RGB)。当 RGB 都相同时，您会得到一个灰色阴影。您需要做的就是为 RGB 设置不同的值，您将在演示中获得随机颜色。请参阅下面的小提琴。

fiddle

为了将它与十六进制颜色数组的原始示例一起使用，您只需将这些颜色转换为它们的等效 rgb 值。

您可以在其他地方获得一个经过深思熟虑的十六进制代码翻译器，但这里有一个快速而肮脏的翻译器，可用于演示目的：

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

编辑：我的回答是基于你的小提琴。上面的画布版本不起作用，因为您的 for 循环实际上并没有更改 i 的值。小提琴和范围界定也发生了一些奇怪的事情，我没有找到。我发布的小提琴虽然有效。

Answer 2

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>

嘿，我试过了，可能有帮助。