Burada, bir görüntü dosyası seçmenin, görüntülemenin, görüntü özelliklerinde döngü oluşturmanın ve ardından görüntüyü tuvalden bir IMG etiketine yeniden boyutlandırmanın ve yeniden boyutlandırılmış görüntü türünü açıkça jpeg olarak ayarlamanın saf bir JavaScript örneği verilmiştir.
Kanvas etiketinde en üstteki görüntüye sağ tıklarsanız ve Dosyayı Farklı Kaydet'i seçerseniz, varsayılan olarak PNG formatında olacaktır. Sağ tıklarsanız ve Dosyayı Kaydet'i alt resim olarak yaparsanız, varsayılan olarak JPEG formatına dönecektir. Genişliği 400 pikselin üzerindeki herhangi bir dosyanın genişliği 400 piksele ve orijinal dosyayla orantılı bir yüksekliğe indirgenir.
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>
SENARYO
<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);
console.log('This is BEFORE the DRAW IMAGE');
ctx.drawImage(img,0,0, 400, newHeight);
console.log('THIS IS AFTER THE DRAW IMAGE!');
var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
};
};
</script>
İşte bir jsFiddle:
jsFiddle Bir görüntü dosyasını seçin, görüntüleyin, özellikleri alın ve yeniden boyutlandırın
JsFiddle'da, bir tuval olan üst görüntüye sağ tıklamak, size bir IMG etiketinde alt görüntüye sağ tıklamakla aynı kaydetme seçeneklerini vermez.