นี่คือตัวอย่าง JavaScript ที่แท้จริงของการเลือกไฟล์รูปภาพแสดงมันวนลูปผ่านคุณสมบัติของรูปภาพจากนั้นปรับขนาดรูปภาพจากผืนผ้าใบใหม่เป็นแท็ก IMG และตั้งค่าประเภทรูปภาพที่ปรับขนาดใหม่เป็น jpeg อย่างชัดเจน
หากคุณคลิกขวาที่รูปภาพบนสุดในแท็กผ้าใบแล้วเลือกบันทึกไฟล์เป็นค่าเริ่มต้นจะเป็นรูปแบบ PNG หากคุณคลิกขวาและบันทึกไฟล์เป็นภาพล่างค่าเริ่มต้นจะเป็นรูปแบบ JPEG ไฟล์ใด ๆ ที่มีความกว้างเกิน 400px จะถูกลดความกว้าง 400px และความสูงจะเป็นสัดส่วนกับไฟล์ต้นฉบับ
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
<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>
นี่คือ jsFiddle:
jsFiddle Pick แสดงรับคุณสมบัติและปรับขนาดไฟล์รูปภาพใหม่
ใน jsFiddle การคลิกขวาที่รูปภาพบนสุดซึ่งเป็นผืนผ้าใบจะไม่ให้ตัวเลือกการบันทึกเหมือนกับการคลิกขวาที่รูปภาพด้านล่างในแท็ก IMG