Here is the sample code to select image from system and display it on html5 canvas and javascript:
In above sample code user can browse image from system using input type control. Once image is selected wait for image load. On image load draw image on canvas while keeping aspect ratio. CalculateAspectRatioFit function is used to calculate dimension with aspect ratio as per canvas and image size.
Related Post from this blog:
1. Write text on HTML5 Canvas using fabricjs
2. Text styling of HTML5 Canvas using fabricjs
<input type="file" id="selectedImage" /> <canvas id="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 * ratio; var rtnHeight = srcHeight * ratio; return { width: rtnWidth, height: rtnHeight }; }
In above sample code user can browse image from system using input type control. Once image is selected wait for image load. On image load draw image on canvas while keeping aspect ratio. CalculateAspectRatioFit function is used to calculate dimension with aspect ratio as per canvas and image size.
Related Post from this blog:
1. Write text on HTML5 Canvas using fabricjs
2. Text styling of HTML5 Canvas using fabricjs
Comments
Post a Comment