Вот пример чистого JavaScript выбора файла изображения, его отображения, перебора свойств изображения, а затем изменения размера изображения с холста в тег IMG и явной установки типа измененного размера изображения на jpeg.
Если вы щелкните правой кнопкой мыши верхнее изображение в теге холста и выберите «Сохранить файл как», по умолчанию будет выбран формат PNG. Если вы щелкните правой кнопкой мыши и сохраните файл как нижнее изображение, по умолчанию будет выбран формат JPEG. Любой файл шириной более 400 пикселей уменьшается до 400 пикселей по ширине, а высота пропорциональна исходному файлу.
HTML
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>
<canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>
<div id='allImgProperties' style="display:inline"></div>
<div id='imgTwoForJPG'></div>
СЦЕНАРИЙ
<script>
window.picUpload = function(frmData) {
console.log("picUpload ran: " + frmData);
var allObjtProperties = '';
for (objProprty in frmData) {
console.log(objProprty + " : " + frmData[objProprty]);
allObjtProperties = allObjtProperties + "<span>" + objProprty + ": " + frmData[objProprty] + ", </span>";
};
document.getElementById('allImgProperties').innerHTML = allObjtProperties;
var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");
var img = new Image;
img.src = URL.createObjectURL(frmData);
console.log('img: ' + img);
img.onload = function() {
var picWidth = this.width;
var picHeight = this.height;
var wdthHghtRatio = picHeight/picWidth;
console.log('wdthHghtRatio: ' + wdthHghtRatio);
if (Number(picWidth) > 400) {
var newHeight = Math.round(Number(400) * wdthHghtRatio);
} else {
return false;
};
document.getElementById('cnvsForFormat').height = newHeight;
console.log('width: 400 h: ' + newHeight);
//You must change the width and height settings in order to decrease the image size, but
//it needs to be proportional to the original dimensions.
console.log('This is BEFORE the DRAW IMAGE');
ctx.drawImage(img,0,0, 400, newHeight);
console.log('THIS IS AFTER THE DRAW IMAGE!');
//Even if original image is jpeg, getting data out of the canvas will default to png if not specified
var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
//The type and size of the image in this new IMG tag will be JPEG, and possibly much smaller in size
document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
};
};
</script>
Вот jsFiddle:
jsFiddle Выбор, отображение, получение свойств и изменение размера файла изображения
В jsFiddle щелчок правой кнопкой мыши по верхнему изображению, которое является холстом, не даст вам тех же параметров сохранения, что и щелчок правой кнопкой мыши по нижнему изображению в теге IMG.