Đây là một ví dụ JavaScript thuần túy về việc chọn một tệp hình ảnh, hiển thị nó, lặp qua các thuộc tính hình ảnh, sau đó định cỡ lại hình ảnh từ canvas thành thẻ IMG và đặt rõ ràng loại hình ảnh được định cỡ lại thành jpeg.
Nếu bạn nhấp chuột phải vào hình ảnh trên cùng, trong thẻ canvas và chọn Save File As, nó sẽ mặc định ở định dạng PNG. Nếu bạn nhấp chuột phải và Lưu tệp dưới dạng hình ảnh bên dưới, nó sẽ mặc định ở định dạng JPEG. Bất kỳ tệp nào có chiều rộng trên 400px sẽ bị giảm chiều rộng xuống 400px và chiều cao tỷ lệ với tệp gốc.
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>
KỊCH BẢN
<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>
Đây là một jsFiddle:
jsFiddle Chọn, hiển thị, lấy thuộc tính và kích thước lại tệp hình ảnh
Trong jsFiddle, nhấp chuột phải vào hình ảnh trên cùng, đó là canvas, sẽ không cung cấp cho bạn các tùy chọn lưu giống như nhấp chuột phải vào hình ảnh dưới cùng trong thẻ IMG.