जावास्क्रिप्ट में imageData से एक छवि कैसे उत्पन्न करें?

Question

मैं जानना चाहता हूं कि छवि डेटा से नई छवि बनाने का कोई तरीका है, जिसे पहले कैनवास तत्व से प्राप्त किया गया था?

मैंने एक समाधान की खोज की है, लेकिन वे सभी एक परिणाम कैनवास के लिए चित्रकारी प्रतीत होते हैं। तो मूल रूप से मुझे छवि छवि को सीधे छवि पर बदलने के लिए एक तरीका चाहिए, यदि संभव हो तो।

Answer 1

आप उपयोग कर सकते हैं toDataURL कैनवास में विधि। यह डेटा यूआरआई के रूप में एक छवि डेटा बनाता है।

var canvas = document.createElement("canvas"); 
canvas.width = 100; 
canvas.height = 100; 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "red"; 
ctx.fillRect(0, 0, 100, 100); 

var img = document.createElement("img"); 
img.src = canvas.toDataURL("image/png"); 
document.body.appendChild(img); 

यदि आप जानना चाहते हैं कि उपयोगकर्ता का ब्राउज़र डेटा यूआरआई योजना का समर्थन करता है, तो आप इस फ़ंक्शन का उपयोग कर सकते हैं। पिछले जवाब की

function useSafeDataURI(success, fail) { 
    var img = document.createElement("img"); 

    img.onerror = function() { 
     fail(); 
    }; 
    img.onload = function() { 
     success(); 
    }; 

    img.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // insert a dot image contains 1px. 
} 

Answer 2

इस मान लिया जाये कि आप

var imgData = document.getElementById('mycanvas').toDataURL(); 

का उपयोग कर फिर आप डाल सकता है आपकी छवि का प्रतिनिधित्व प्राप्त कर सकते हैं अपने कैनवास

<canvas id='mycanvas'></canvas> 

है कि इसके स्रोत को बदलने के द्वारा एक नियमित रूप से छवि टैग में

<img id='myimage'/> 

document.getElementById('myimage').src = imgData; 

Answer 3

बहुत सारे आधुनिक ब्राउज़र डेटा यूआरआई योजना का समर्थन करते हैं।

यदि आपके पास छवि डेटा है, तो आप जावास्क्रिप्ट का उपयोग करके एक img तत्व की src विशेषता सेट कर सकते हैं। निम्नलिखित उदाहरण को

देखो: http://www.websiteoptimization.com/speed/tweak/inline-images/

Answer 4

कोई भी प्रश्न का उत्तर देते हैं के रूप में यह इस विषय में प्रस्तुत किया गया था - ImageData से एक छवि हो रही। तो यहाँ एक समाधान है।

function imagedata_to_image(imagedata) { 
    var canvas = document.createElement('canvas'); 
    var ctx = canvas.getContext('2d'); 
    canvas.width = imagedata.width; 
    canvas.height = imagedata.height; 
    ctx.putImageData(imagedata, 0, 0); 

    var image = new Image(); 
    image.src = canvas.toDataURL(); 
    return image; 
}