HTML5 Canvas पर डेटा URL से इमेज कैसे ड्रॉ करें?

यदि आपके पास डेटा URL है, तो आप कैनवास पर एक इमेज बना सकते हैं। यह निम्न कोड स्निपेट में दिखाया गया है:

var myImg = new Image;
myImg.src = strDataURI;

drawImage() मेथड इमेज, कैनवास, या वीडियो को कैनवास पर ड्रॉ करता है। drawImage() मेथड इमेज के भाग भी ड्रॉ कर सकता है, और/या इमेज आकार बढ़ा/घटा सकता है।

नीचे दिया गया कोड भी उपयुक्त क्रम के साथ है - इमेज बनाएं, नई इमेज उपयोग करने के लिए onload सेट करें, फिर src सेट करें:

// load image from data url
var Obj = new Image();
Obj.onload = function() {
  context.drawImage(myImg, 0, 0);
};
Obj.src = dataURL;

सही क्रम: 1) new Image() बनाएं, 2) onload हैंडलर सेट करें, 3) src सेट करें। drawImage(img, x, y), drawImage(img, x, y, w, h), drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) (सोर्स/डेस्ट आयत)।