getImageData/putImageData के साथ कैनवास जैसी HTML छवियों का उपयोग करना संभव है?

Question

मैं जानना चाहता हूं कि HTML छवियों में निहित डेटा को गतिशील रूप से संशोधित/एक्सेस करने का कोई तरीका है जैसे कि वे एक HTML5 कैनवास तत्व थे। कैनवास के साथ, आप जावास्क्रिप्ट में getImageData() और putImageData() के साथ कच्चे पिक्सेल डेटा तक पहुंच सकते हैं, लेकिन अब तक मैं यह समझने में सक्षम नहीं हूं कि छवियों के साथ इसे कैसे किया जाए।

Answer 1

// 1) Create a canvas, either on the page or simply in code 
var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext('2d'); 

// 2) Copy your image data into the canvas 
var myImgElement = document.getElementById('foo'); 
ctx.drawImage(myImgElement, 0, 0); 

// 3) Read your image data 
var w = myImgElement.width, h=myImgElement.height; 
var imgdata = ctx.getImageData(0,0,w,h); 
var rgba = imgdata.data; 

// 4) Read or manipulate the rgba as you wish 
for (var px=0,ct=w*h*4;px<ct;px+=4){ 
    var r = rgba[px ]; 
    var g = rgba[px+1]; 
    var b = rgba[px+2]; 
    var a = rgba[px+3]; 
} 

// 5) Update the context with newly-modified data 
ctx.putImageData(imgdata,0,0); 

// 6) Draw the image data elsewhere, if you wish 
someOtherContext.drawImage(ctx.canvas, 0, 0); 

ध्यान दें कि कदम 2 भी एक छवि से में लाया जा सकता है लिपि में सीधे लोड पृष्ठ पर नहीं:

// 2b) Load an image from which to get data 
var img = new Image; 
img.onload = function(){ 
    ctx.drawImage(img, 0, 0); 
    // ...and then steps 3 and on 
}; 
img.src = "/images/foo.png"; // set this *after* onload 

Answer 2

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

Answer 3

आप छवि को drawImage() के साथ कैनवास तत्व में खींच सकते हैं, और फिर कैनवास से पिक्सेल डेटा प्राप्त कर सकते हैं।

Answer 4

आप पहली बार कैनवास पर एक तस्वीर खींचना और फिर प्राप्त करना चाहते हैं कैनवास से imageData, यह एक गलत तरीका है, क्योंकि जेएस सोचता है कि यह "क्रॉस-डोमेन एक्सेस" है, लेकिन getIamgeData विधि किसी छवि पर "क्रॉस-डोमेन एक्सेस" की अनुमति नहीं देती है। आप एक कोशिश कर सकते हैं रूट जगह में डाल दें और इसे "लोकलहोस्ट" द्वारा एक्सेस करें।

Answer 5

इस कोड के साथ कुछ समस्याएं हो रही के बाद, मैं Phrogz के जवाब देने के लिए एक या दो चीजों को जोड़ना चाहते हैं:

// 1) Create a canvas, either on the page or simply in code 
var w = myImgElement.width, h=myImgElement.height; // NEw : you need to set the canvas size if you don't want bug with images that makes more than 300*150 

var canvas = document.createElement('canvas'); 
canvas.height = h; 
canvas.width = w; 
var ctx = canvas.getContext('2d'); 

// 2) Copy your image data into the canvas 
var myImgElement = document.getElementById('foo'); 
ctx.drawImage(myImgElement, 0, 0, w, h); // Just in case... 

// 3) Read your image data 
var imgdata = ctx.getImageData(0,0,w,h); 
var rgba = imgdata.data; 

// And then continue as in the other code ! 

Answer 6

है कि मुझे (के लिए काम किया IE10x64, Chromex64 Win7 पर, क्रोमियम हाथ लिनक्स, ... लगता है फ़ायरफ़ॉक्स 20 बांह लिनक्स के साथ बग लेकिन यकीन नहीं ... के लिए पुन: परीक्षण) के लिए

--html--

<canvas id="myCanvas" width="600" height="300"></canvas> 
<canvas id="myCanvasOffscreen" width="1" height="1"></canvas> 

- जे एस -

// width & height can be used to scale image !!! 
    function getImageAsImageData(url, width, height, callack) { 
    var canvas = document.getElementById('myCanvasOffscreen'); 
    canvas.width = width; 
    canvas.height = height; 
    var context = canvas.getContext('2d'); 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
     context.drawImage(imageObj, 0, 0, width, height); 
     imgData = context.getImageData(0,0,width, height); 
     canvas.width = 1; 
     canvas.height = 1; 

     callack(imgData); 
    }; 
    imageObj.src = url; 
    } 

- तो -

var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext('2d'); 

    var imgData; 
    getImageAsImageData('central_closed.png', IMG_WIDTH, IMG_HEIGHT, 
    function(imgData) { 

     // do what you want with imgData.data (rgba array) 
     // ex. colorize(imgData, 25, 70, 0); 

     ctx.putImageData(imgData,0,0); 

    } 
); 

Answer 7

सीधे आईएमजी तत्व पर काम भी मान्य है:

var image = document.createElement('img'),w,h ; 

image.src = "img/test.jpg" ; 

$(image).one('load',function(){ 

    w = image.naturalWidth ; 
    h = image.naturalHeight ; 

    var cnv = document.createElement('canvas') ; 
    $(cnv).attr("width",w) ; 
    $(cnv).attr("height",h) ; 

    var ctx = cnv.getContext('2d') ; 
    ctx.drawImage(image,0,0) ; 

    var imgdata = ctx.getImageData(0,0,w,h) ; 

    var rgba = imgdata.data ; 
    for (var px=0,ct=w*h*4;px<ct;px+=4){ 
     var r = rgba[px+0] ; 
     var g = rgba[px+1] ; 
     var b = rgba[px+2] ; 
     var a = rgba[px+3] ; 
     // Do something 
     rgba[px+0] = r ; 
     rgba[px+1] = g ; 
     rgba[px+2] = b ; 
     rgba[px+3] = a ; 
    } 

    ctx.putImageData(imgdata,0,0) ; 

    $("body").append(cnv) ; 

}) ;