数组中的Javascript图像

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

此数组：[“#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>");
}

var指数；
对于（索引=0；索引

---

我需要的是这样的东西：但颜色也一样

编辑：

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

//例如，创建一些随机数据
var数据=[]；
对于（变量i=0，l=1000000；i

应该给像素随机的颜色。。。但是它不起作用

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

var hex=[“#ffffff”、“#ff0000”、“#ffff00”]
函数随机化（rangeLower、rangeUpper）{
var t=（Math.random（）*（rangeUpper rangeLower））+rangeLower
返回数学楼层（t）
}
var testContainer=document.getElementById（“测试”）
对于（变量i=0；i<100；i++）{
对于（var j=0；j<100；j++）{
var t=document.createElement（“div”）
t、 style.backgroundColor=hex[随机（0,2）]
t、 style.left=j+“px”
t、 style.top=i+“px”
testContainer.appendChild（t）
}
}

#测试{
位置：相对位置；
}
#试验室{
位置：绝对位置；
高度：2倍；
宽度：2倍；
}

var hex=[“#ffffff”、“#ff0000”、“#ffff00”]
函数随机化（rangeLower、rangeUpper）{
var t=（Math.random（）*（rangeUpper rangeLower））+rangeLower
返回数学楼层（t）
}
var testContainer=document.getElementById（“测试”）
对于（变量i=0；i<100；i++）{
对于（var j=0；j<100；j++）{
var t=document.createElement（“div”）
t、 style.backgroundColor=hex[随机（0,2）]
t、 style.left=j+“px”
t、 style.top=i+“px”
testContainer.appendChild（t）
}
}

#测试{
位置：相对位置；
}
#试验室{
位置：绝对位置；
高度：2倍；
宽度：2倍；
}

---

画布示例的问题在于，您对单个像素的红色、绿色和蓝色（RGB）使用了相同的随机值。当RGB都是相同的，你会得到一个灰色的阴影。所有你需要做的是有不同的RGB值，你会在你的演示随机颜色。请看下面的小提琴

为了使用十六进制颜色数组的原始示例，只需将这些颜色转换为它们的等效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

的值。小提琴和范围界定也有一些奇怪的东西，我没有找到。不过，我发布的小提琴很管用。

画布示例的问题在于，您对单个像素使用了相同的随机值，即红色、绿色和蓝色（RGB）。当RGB都是相同的，你会得到一个灰色的阴影。所有你需要做的是有不同的RGB值，你会在你的演示随机颜色。请看下面的小提琴

为了使用十六进制颜色数组的原始示例，只需将这些颜色转换为它们的等效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

的值。小提琴和范围界定也有一些奇怪的东西，我没有找到。我贴的小提琴很管用。

？这就是

canvas

的用途。您可以分别针对每个像素。PS阵列的大小可能并没有导致减速；您可能试图在页面上放置的元素数为。我使用画布从大量像素颜色创建图像，速度非常快。我需要的是这样的东西：但也有颜色。。。你能告诉我怎么做吗？我对canvas一无所知…你为什么不阅读Alex在评论中包含的文档，尝试一些代码，如果你有任何问题就回来？哦，我没有注意到这是一个链接…：D？这就是

canvas

的用途。您可以分别针对每个像素。PS阵列的大小可能并没有导致减速；您可能试图在页面上放置的元素数为。我使用画布从大量像素颜色创建图像，速度非常快。我需要的是这样的东西：但也有颜色。。。你能告诉我怎么做吗？我对canvas一无所知…你为什么不阅读Alex在评论中包含的文档，尝试一些代码，如果你有任何问题就回来？哦，我会的