จริงๆแล้วในการย่อรูปมีโปรแกรมมากมายที่สามารถย่อรูปทีเดียวหลายๆไฟล์ได้ วันนี้เราจะมาลองใช้ javascript ย่อรูปตามสัดส่วนเป็นเปอร์เซ็นในทีเดียวหลายๆรูปซึ่งวิธีนี้มีข้อดีคือการย่อจะทำงานได้เร็วเพราะเป็นการทำงานฝั่ง client ไม่ต้องส่งไฟล์ไปให้กับ server
มาดูตัวอย่างกันครับ
ในหลักการทำทำนั้นจะใช้วิธีการ user upload image ก็ทำการย่อ object รูปและใส่ลง canvas จากนั้น ก็แปลงเป็น blob และบันทึกโดยใช้ filesaver.js
โดยเราจะใช้ library ของ JavaScript ทั้งหมด 3 ตัวได้แก่
1 jQuery
2 filesaver.js
3 canvas to blob
เราไปดู source ผมจะอธิบายแต่ javascript ส่วนอื่นๆสามารถ Download ไปลองศึกษากันได้ครับ
$(document).ready(function(){
function readURL(input) { // function readURL เป็น function หลักในการทำงานหลังจาก user browse file ไฟล์
$.each(input[0].files, function( index, valueinput ) { // each เป็นการ loop ไฟล์ที่อยู่ใน input file ที่มีทั้งหมด
if (input[0].value != "" && valueinput.name != "") { // ตรวจว่ามีค่าและชื่อไฟล์หรือเปล่า
var reader = new FileReader(); // object file reader สำหรับอ่านไฟล์ใน input
reader.onload = function (e) { // onload สั่งให้ทำงานในการโหลดไฟล์
createimage(e.target.result,valueinput.name,valueinput.type); //เรียกใช้ function createimage
}
reader.readAsDataURL(valueinput); //อ่านรูปภาพ
}
});
}
function createimage(result,name,typex){ // ฟังก์ชั่นนี้ทำหน้าที่ในการ ย่อขนาดรูปตาม % และวาดลง canvas และทำการ save โดยจะมีการรับค่ามา 3 ค่า คือ รูป,ชื่อไฟล์,ชนิดไฟล์
canvas = document.getElementById('Canvas'); // สร้าง canvas จาก html id tag
context = canvas.getContext('2d');
imageObj = new Image(); // สร้าง object image
var tosize = 100-parseInt($("#size").val()); // ดึงค่า % การย่อว่ากี่ % จาก select id size
imageObj.onload = function() { // ฟังก์ชั่นขนาดโหลดรูป
canvas.width = (this.width*tosize/100); // ปรับขนาดรูปและ canvas ให้เป็นไปตาม %
canvas.height = (this.height*tosize/100)
imageObj.width = (this.width*tosize/100);
imageObj.height = (this.height*tosize/100)
context.drawImage(imageObj, 0, 0,this.width,this.height); // วาดรูปลงใน canvas
// แปลง canvas ไปเป็น Blob
if (canvas.toBlob) {
canvas.toBlob(
function (blob) {
saveAs(blob, name); // ใส่ให้ browser save รูป
},
typex //ชนิดไฟล์
);
}
context.clearRect(0, 0, canvas.width, canvas.height); // เคลียค่า canvas
};
imageObj.src = result; // ใส่รูปให้กับ object image
}
$( ".saveimage" ).click(function() { // ใช้ jquery ดัก event เมื่อ user กดปุ่มย่อและบันทึก
readURL($("#imagebroswer")); // เรียก readURL
return false;
});
});
JavaScript ทั้งหมดก็มีเท่านี้ครับ
ตัวอย่างเบื้องต้นนี้ยังขาดในหล่ายๆส่วน เช่น validate ชนิดไฟล์ ขนาดไฟล์ หรือปรับปรุง ui และการทำงาน แต่ก็น่าจะทำให้ทราบ concept และความสามารถของ js ว่ามีความสามารถหลากหลายจริงๆ
ลองนำ Code ไปเล่นกันดูครับ