जावास्क्रिप्ट - छवि डेटा प्रोसेसिंग और div प्रतिपादन

Question

तो चुनौती जो मैंने स्वयं के लिए बनाई है वह इस तरह है।

Result Photo http://f.cl.ly/items/2t1F2Q0Y2w0K250L0t0v/Screen%20Shot%202013-01-31%20at%2010.52.19%20AM.png

:

Source Photo http://f.cl.ly/items/012t1M250f0T101F2L0n/unicorn.jpg

मैं रंग मान मैप है और इसका एक pixelated प्रतिनिधित्व बनाने हूँ कि divs का उपयोग कर

यहाँ परिणाम है:

मैं एक स्रोत तस्वीर है

कोड जो मैं इसे पूरा कर रहा हूं वह है:

'use strict'; 

var imageSource = 'images/unicorn.jpg'; 

var img = new Image(); 
img.src = imageSource; 
var canvas = $('<canvas/>')[0]; 
canvas.width = img.width; 
canvas.height = img.height; 
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); 
var context = canvas.getContext('2d'); 

console.log('img height: ' + img.height); 
console.log('img width: ' + img.width); 

var pixelDensity = 70; 

var timerStart = new Date(); 


for (var i = pixelDensity/2; i < img.height; i += (img.height/pixelDensity)) { 
    $('.container').append($('<div class="row">')); 
    for(var j = pixelDensity/2; j < img.width; j += img.height/pixelDensity) { 
     var value = context.getImageData(j, i, 1, 1).data; 
     var colorValue = 'rgb(' + value[0] + ', ' + value[1] + ', ' + value[2] + ')'; 
     $('.row:last').append($('<div class="block">').css({'background-color' : colorValue})); 
    } 
} 

var timerStop = new Date(); 

console.log(timerStop - timerStart + ' ms'); 

पिक्सेलडेंसी चर नियंत्रण रंग के नमूने एक साथ कितने करीब हैं। संख्या जितनी छोटी होगी, उतने कम नमूने, परिणाम देने के लिए कम समय लेते हैं। जैसे ही आप संख्या बढ़ाते हैं, नमूने ऊपर जाते हैं और फ़ंक्शन काफी धीमा हो जाता है।

मुझे यह जानकर उत्सुकता है कि यह चीज़ इतनी लंबी अवधि क्यों ले रही है। मैंने थोड़ा समान परियोजनाओं को देखा है - सबसे विशेष रूप से Jscii - जो छवि डेटा को बहुत तेज़ी से संसाधित करता है, लेकिन मैं यह नहीं समझ सकता कि इसमें क्या अंतर है जो अतिरिक्त प्रदर्शन की पेशकश कर रहा है।

आपकी मदद के लिए धन्यवाद!

Answer 1

मुख्य मुद्दा यह है कि आप एक पाश में एक पेज सही करने के लिए डोम तत्वों संलग्न है। यदि आप वास्तव में पृष्ठ पर जोड़ने से पहले अपने सभी डेटा के साथ रैपर तत्व बनायेंगे तो यह बहुत तेज होगा।

संपादित करें: मैं यह भी देखा है कि आप हर पिक्सेल के लिए context.getImageData कहते हैं, यह है कि क्या समय की सबसे लेता है। इसके बजाय, आपको चर डेटा में छवि डेटा कैश करना चाहिए और इससे रंग मान प्राप्त करना चाहिए।तुम भी रूप में @Travis जम्मू उल्लेख किया और उन्हें दौर पाश की स्थिति को कैश करने की आवश्यकता होगी:

var wrapper = $('<div class="container">'); 
var imgData = context.getImageData(0, 0, img.width, img.height).data; 
var getRGB = function(i) { return [imgData[i], imgData[i+1], imgData[i+2]]; }; 
var start = Math.round(pixelDensity/2), 
    inc = Math.round(img.height/pixelDensity); 

for (var i = start; i < img.height; i += inc) { 
    var row = $('<div class="row">'); 
    for(var j = start; j < img.width; j += inc) { 
     var colorValue = getRGB((i * (img.width*4)) + (j*4)); 
     row.append($('<div class="block">').css({'background-color' : 'rgb('+(colorValue.join(','))+')'})); 
    } 
    wrapper.append(row); 
} 

$('body').append(wrapper); 

यह 600-1000 मिलीसेकेंड के लिए 6-9 सेकंड से समय को कम करेगा। आप jquery के बजाय इसे और भी तेज़ बनाने के लिए डीओएम तत्वों में हेरफेर करने के लिए सादे जावास्क्रिप्ट का उपयोग भी कर सकते हैं।

Answer 2

आप इतने सारे divs बनाने के बजाय कैनवास पर परिणाम क्यों नहीं खींचते हैं? सिद्धांत रूप में यह बहुत तेज़ होना चाहिए ...

Answer 3

मुझे पहले की तरह की गति की समस्याएं थीं - इतनी देर लगने का कारण यह है कि आप इसे टेक्स्ट के रूप में HTML देकर तत्वों में जोड़ रहे हैं, जो इसका मतलब है कि इसे हर बार उस पाठ को पार्स करना होगा। यदि आप नए तत्वों को जोड़ने के लिए जावास्क्रिप्ट डीओएम का उपयोग करते हैं तो आपको एक महत्वपूर्ण गति वृद्धि दिखाई देगी।

संपादित करें: मामले में आप नए तत्व इस तरह से बनाने से परिचित नहीं हैं, वाक्य रचना इस तरह दिखता है:

var newPixel = document.createElement('div'); 
newPixel.style.height = 3; 
newPixel.style.backgroundColor = 'black'; 
// etc... 
parentElement.appendChild(newPixel); 

Answer 4

आप jQuery लुकअप की संख्या कम कुछ हद तक तेजी लाने सकता है। उदाहरण के लिए, अपने पहले पाश शुरू होने से पहले, ऐसा करते हैं:

var $container = $('.container'); 

अब आप कंटेनर हर बार देखने के लिए नहीं है।

इसके अलावा, जब आप एक पंक्ति बनाने के लिए, से बचने के लिए एक ही चाल का उपयोग 'पंक्ति: पिछले' देखने:

var $row = $('<div class="row">'); 
$container.append($row); 
... 
$row.append($('<div class="block">')...