Posts

Showing posts from September, 2016

Show Image on canvas HTML5

Here is the sample code to select image from system and display it on html5 canvas and javascript:


<inputtype="file"id="selectedImage"/><canvasid="myCanvas"width="500"height="500"></canvas>
Javascript code:
$("#selectedImage").change(function(e) { var URL =window.URL; var url = URL.createObjectURL(e.target.files[0]); img.src = url; img.onload =function() { var canvas =document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var imgSize = calculateAspectRatioFit(img.width, img.height, canvas.clientWidth, canvas.clientHeight); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, imgSize.width, imgSize.height); } }); function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio =Math.min(maxWidth / srcWidth, maxHeight / srcHeight); var rtnWidth = srcWidth * rat…