Oto przykład w czystym języku JavaScript, w którym wybiera się plik obrazu, wyświetla go, przegląda właściwości obrazu, a następnie zmienia rozmiar obrazu z kanwy na znacznik IMG i jawnie ustawia typ obrazu o zmienionym rozmiarze na jpeg.
Jeśli klikniesz prawym przyciskiem myszy górny obraz w tagu płótna i wybierzesz Zapisz plik jako, domyślnie zostanie ustawiony format PNG. Jeśli klikniesz prawym przyciskiem myszy i zapiszesz plik jako dolny obraz, domyślnie zostanie ustawiony format JPEG. Każdy plik o szerokości przekraczającej 400 pikseli jest zmniejszany do szerokości 400 pikseli, a wysokość jest proporcjonalna do oryginalnego pliku.
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>
SCENARIUSZ
<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>
Oto jsFiddle:
jsFiddle Wybierz, wyświetl, pobierz właściwości i zmień rozmiar pliku obrazu
W jsFiddle kliknięcie prawym przyciskiem myszy górnego obrazu, który jest płótnem, nie daje takich samych opcji zapisywania, jak kliknięcie prawym przyciskiem myszy dolnego obrazu w tagu IMG.