I have a function that send a base64 image to my input, but I want to resize the image before send to input. I need a 250x250 image, but when take shot from mobile the image goes 3096x3096...
There is my code:
function sendPhoto() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.addEventListener('load', function (e) {
var permitted_files = ['image/png', 'image/jpeg', 'image/bmp'];
var baseImg = e.target.result;
var parteImg = baseImg.substring(11, 15);
if (parteImg.includes('jpeg') || parteImg.includes('png') || parteImg.includes('bmp')) {
document.getElementById('sendedPhoto').src = e.target.result;
document.getElementById('btnPhoto').style.display = '';
} else {
$('body').overhang({
type: 'error',
message: 'This is not an image file.',
});
document.getElementById('uploadFoto').value = '';
}
});
FR.readAsDataURL(this.files[0]);
}
}
Any ideas? Thanks!
You can use HTML5 Canvas to do that Refer : Canvas Image