Javascript Image from Array

Question

16進数で配列からイメージを生成することはできますか？

この配列：[ "#FFFFFF"、 "＃1 FF0000"、 "＃1 FFFF00"]

なる出力最初の画素が色を有する画像： "#FFFFFF"、第二：「＃1 FF0000を"、＃3："＃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/しかしaswell色で...

編集：

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

は、画素にランダムな色を与える必要があります...しかし、それはdoesntの作品...

...上記のフィドルを参照し、そこにコードを貼り付け

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>

ねえ、私はこれを試して、それが助けることができるかもしれません。