I would like to create a canvas image based on the selected image
<canvas id="canvas" ></canvas>
<input type="file" id="file-input">
Using JavaScript:
$(function() {
$('#file-input').change(function(e) {
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
function fileOnload(e) {
var $img = $('<img>', { src: e.target.result });
var canvas = $('#canvas')[0];
var context = canvas.getContext('2d');
$img.load(function() {
context.drawImage(this, 0, 0);
});
}
});
Although the file is successfully written to the canvas, the issue I am encountering is that it only displays within the dimensions of the canvas.
Is there a way to automatically adjust the canvas size to match that of the selected image?
Furthermore, the drawn image appears much larger compared to the original image size.