자바 스크립트 이미지 배열

Question

16 진수 코드가있는 배열에서 이미지를 생성 할 수 있습니까?

이 배열 : "#FFFFFF", "#의 FF0000", "#의 FFFF00"]

겠습니까 출력을 제 1 픽셀은 색상이있는 이미지 "#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/ 그러나 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(); 
} 

픽셀에게 임의의 색상을 제공해야

...하지만 그것은 작동 나던 ...

... 위의 바이올린을 확인하고 거기에 코드를 붙여 넣습니다

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

편집 : 여기에 다른 곳에서 정말 잘 생각 16 진 코드 변환기를 얻을 수 있지만

는 데모 목적을 위해 일할 것입니다 신속하고 더러운 하나입니다 내 대답은 당신의 바이올린을 기반으로합니다. 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>

이봐,이게 도움이 될지도 몰라.