Bagaimana cara upload gamber ke Canvas HTML 5 menggunakan javascript ?

Caranya adalah menggunakan FileReader API untuk akses lokal file dengan Javascript.

Method yang digunakan bisa dilihat seperti ini :

// Gunakan Method ON change 
// Native javascript method  
// document.getElementById("uploadFile").addEventListener('change', handleImage, false);
$("#uploadFile").on("change", function(e){
       // FileReader API
        var reader = new FileReader();
	reader.onload = function(evt){
				  
	// Load image menjadi base64
		var img = new Image();
		img.onload = function(){
		   canvas.width = img.width;
		   canvas.height = img.height;						
		   context.drawImage(img,0,0);
	        }
		img.src = evt.target.result;
	}
	reader.readAsDataURL(e.target.files[0]); 
});

Semoga bermanfaat.

Untuk demo bisa dilihat pada link dibawah.

Preview