जावास्क्रिप्ट छविडेटा 0 के

Question

की सरणी देता है मैं छवि डेटा में हेरफेर करने की कोशिश कर रहा हूं लेकिन छवि को लोड करने और उसके पिक्सेल डेटा प्राप्त करने के बाद मेरी छवि डेटा एरे सभी 0 लौटाती है।

स्लाइडर और टेक्स्ट बॉक्स जैसे कुछ HTML तत्व हैं। कृपया उनको अनदेखा करें।

एक ImageObject डेटा संरचना जहाँ मैं छवि, pixelData और इतने पर की तरह सभी छवि गुण भंडारण कर रहा हूँ नहीं है ..

मैं पहले छवि को लोड अपने पिक्सेल डेटा और फिर ImageObject.imageData स्टोर करने के लिए एक कॉलबैक वापसी । हालांकि लॉग में ImageObject.data सभी 0 का रिटर्न देता है।

ImageObject = {}; 
var MainCtx; 
var MainCanvas; 
//get the image pixel properties 

function start() 
{ 
    //load up the main canvas and ctx 
    MainCanvas = document.getElementById("canvas"); 
    MainCtx = MainCanvas.getContext('2d'); 

    //first load up the image and then get its pixel data 
    ImageObject.loadImage(function(imageData){ 
     ImageObject.imageData = imageData; 
     ImageObject.data = ImageObject.imageData.data; 

     console.log(ImageObject.data); // -> data return all 0's in the array 

     for(var i = 0; i < ImageObject.data.length; i += 4) { 
      var brightness = 0.34 * ImageObject.data[i] + 0.5 * ImageObject.data[i + 1] + 0.16 * ImageObject.data[i + 2]; 
      // red 
      ImageObject.data[i] = brightness; 
      // green 
      ImageObject.data[i + 1] = brightness; 
      // blue 
      ImageObject.data[i + 2] = brightness; 
     } 

     ImageObject.ctx.putImageData(ImageObject.imageData,ImageObject.image.width,ImageObject.image.height); 
    }); 
} 

ImageObject.loadImage = function(callback) 
{ 
    ImageObject.image = new Image(); 
    ImageObject.image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
    ImageObject.image.addEventListener('load',function() 
    { 
     MainCtx.drawImage(ImageObject.image,0,0); 
     callback(ImageObject.getImageData(ImageObject.image)); 
    }); 
} 

ImageObject.getImageData = function(img) 
{ 
    this.canvas = getCanvas(img.width,img.height); 
    this.ctx = this.canvas.getContext('2d'); 
    return this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height); 
} 

function getCanvas(w,h) 
{ 
    var c = document.createElement('canvas'); 
    c.width = w; 
    c.height = h; 
    return c; 
} 

start(); 

मैं

jsFiddle

नीचे jsFiddle लिंक कोई क्या मैं गलत कर रहा हूँ के रूप में एक बार देख ले कृपया साझा किया है?

Answer 1

त्वरित जवाब है:

आप एक नया (खाली) कैनवास से छवि डेटा प्राप्त करने का प्रयास करें।

स्पष्टीकरण:

अपने कार्य getImageData में, आप एक समारोह getCanvas कहा जाता है का उपयोग कर अपने कैनवास निर्धारित किया है। इस समारोह में, अपनी छवि को उस पर तैयार के साथ आपके वास्तविक कैनवास उपयोग करने के बजाय, आप एक नया कैनवास (document.createElement('canvas');)

, जब से तुम MainCanvas के रूप में अपने कैनवास निर्धारित किया है बनाते हैं, तो आप इस तरह अपने कार्य getImageData में इसका इस्तेमाल करना चाहिए :

this.canvas = MainCanvas;

दुर्भाग्य से, मैं इसे अपने Cross-Origin Resource Sharing policy की वजह से jsfiddle में काम नहीं कर सकता।

Answer 2

आपकी समस्या यह है कि आप getCanvas फ़ंक्शन के अंदर बनाए गए नए कैनवास से अपना छवि डेटा प्राप्त कर रहे हैं। मौजूदा कैनवास पर आपको getImageData चलाने की आवश्यकता है।

यहाँ console.log

console.log(MainCtx.getImageData(0, 0, MainCanvas.width, MainCanvas.height)); 

के लिए एक अद्यतन यह अभी भी सीधे काम नहीं करेगा के रूप में आप एक अलग मूल से छवि लोड कर रहे हैं, तो आप स्थानीय स्तर पर छवि की मेजबानी, पहले यह सुनिश्चित कर लें है।

Answer 3

जानकारी को अपने बफर के माध्यम से 32 बिट हस्ताक्षरित पूर्णांक सरणी के अंदर रखने की कोशिश करें।

कुछ

तरह

var img = canvas.getImageData(), 
data32 = new Uint32Array(img.data.buffer); 

//loop through the pixels 
for(var i=0; i<data32.length, i++){ 
var pixel = data32[i]; 

//get the colors 
var r = (pixel) & 0xff, 
g = (pixel >> 8) & 0xff, 
b = (pixel >> 16) & 0xff; 
a = (pixel >> 24) & 0xff; 

//put the pixels back in (no change) 
data32[i] = (a << 24) 
| (b << 16) 
| (g << 8) 
| r; 
} 

लेखक: मैट लॉकयर

से लिया गया: http://mattlockyer.github.io/iat455/workshop-1.html