วาดภาพจาก data URL ลง HTML5 canvas

หากคุณมี data URL คุณสามารถสร้างภาพลง canvas ได้ ทำได้ดังโค้ดสนิปเพ็ตด้านล่าง:

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

เมธอด drawImage() วาดภาพ canvas หรือวิดีโอลงบน canvas สามารถวาดส่วนของภาพและเพิ่ม/ลดขนาดได้

โค้ดด้านล่างเหมาะสมเช่นกันด้วยลำดับ — สร้างภาพ ตั้ง onload ใช้ภาพใหม่ แล้วตั้ง src:

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