Berikut adalah contoh JavaScript murni untuk memilih file gambar, menampilkannya, mengulang melalui properti gambar, dan kemudian mengubah ukuran gambar dari kanvas menjadi tag IMG dan secara eksplisit mengatur jenis gambar yang diubah ukurannya ke jpeg.
Jika Anda mengklik kanan gambar atas, di tag kanvas, dan memilih Simpan File Sebagai, itu akan default ke format PNG. Jika Anda mengklik kanan, dan Save File sebagai gambar bawah, itu akan default ke format JPEG. File apa pun yang lebarnya lebih dari 400px dikurangi menjadi 400px, dan tingginya sebanding dengan file aslinya.
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>
NASKAH
<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>
Ini adalah jsFiddle:
jsFiddle Memilih, menampilkan, mendapatkan properti, dan mengubah ukuran file gambar
Di jsFiddle, mengklik kanan gambar atas, yang merupakan kanvas, tidak akan memberi Anda opsi penyimpanan yang sama seperti mengklik kanan gambar bawah di tag IMG.