Ось чистий приклад 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.