javascript - atscript - स्क्रिप्टिंग भाषा




उपयोगकर्ता द्वारा क्लिक किए जाने पर किसी छवि के पिक्सेल को पढ़ने के लिए जावास्क्रिप्ट या jQuery का उपयोग कैसे करें? (2)

मैंने एक छवि में हरे रंग के पिक्सेल गिनने के लिए एक रास्ता खोजा, मेरे अपने कार्यों को लिखना समाप्त कर दिया। हेयर यू गो

जादू ®

function getPixel(imgData, index) {
  var i = index*4, d = imgData.data;
  return [d[i],d[i+1],d[i+2],d[i+3]] // [R,G,B,A]
}

function getPixelXY(imgData, x, y) {
  return getPixel(imgData, y*imgData.width+x);
}

आप imgData कहां मिलता है?

  1. <canvas> बनाएं
  2. कैनवास context प्राप्त करें
  3. <img> से <canvas> कॉपी करें
  4. कैनवास छवि डेटा प्राप्त करें (मूल्यों की एक सरणी [r,g,b,a,r,g,b,a,r,g,..] )
  5. 'जादू' करें

ले कोड:

var cvs = document.createElement('canvas'),
    img = document.getElementsByTagName("img")[0];   // your image goes here
    // img = $('#yourImage')[0];                     // can use jquery for selection
cvs.width = img.width; cvs.height = img.height;
var ctx = cvs.getContext("2d");
ctx.drawImage(img,0,0,cvs.width,cvs.height);
var idt = ctx.getImageData(0,0,cvs.width,cvs.height);

// The magic®
getPixel(idt, 852);  // returns array [red, green, blue, alpha]
getPixelXY(idt,1,1); // same pixel using x,y

एक कामकाजी उदाहरण के लिए http://qry.me/xyscope/ का स्रोत कोड देखें

जब उपयोगकर्ता उस पर क्लिक करता है तो छवि के पिक्सेल के रंग को पढ़ने के लिए मैं जावास्क्रिप्ट या jQuery का उपयोग कैसे कर सकता हूं? (निश्चित रूप से हमारे पास क्लिक ईवेंट की सदस्यता ले कर इस पिक्सेल का (x, y) मान है)।


यदि आप छवि को कैनवास तत्व में getImageData सकते हैं तो आप RGBA मान वाले सरणी को वापस करने के लिए getImageData विधि का उपयोग कर सकते हैं।

var img = new Image();
img.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(img, 0, 0);
data = context.getImageData(x, y, 1, 1).data;






jquery