ในบางครั้งผู้ใช้ต้อง Download ไฟล์ รูปจากหน้าเว็บทีละหลายๆรูป
เราสามารถช่วยผู้ใช้ได้ด้วยการสร้าง Zip File รูปภาพ ให้ผู้ใช้ Download รูป ได้ด้วย javascript
ในตัวอย่างนี้ใช้ Library จาก https://stuk.github.io/jszip/ และ https://github.com/eligrey/FileSaver.js/
ผลลัพธ์ที่ได้คือ https://xn--12cb3ech1bdffb0m0b3iuam.net/js_zip/js_zip.html
<html>
<head>
<meta charset="utf-8" />
<!-- เรียกใช้งาน library FileSaver --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" ></script>
<!-- เรียกใช้งาน library jszip js --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js" ></script>
<!-- เรียกใช้งาน bootstrap css --->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>ตัวอย่างโดย www.รับเขียนโปรแกรม.net</h1>
<!-- สร้างแถวรูปภาพ --->
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body text-center">
<!-- แสดงรูปภาพ โดยกำหนด id เป็น img1 --->
<img id="img1" src='screen1.png' style="max-width: 100%" />
<!-- สร้าง check box โดยกำหนด id เป็น img1_check --->
<input type="checkbox" id="img1_check" /> เลือก
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body text-center">
<!-- แสดงรูปภาพ โดยกำหนด id เป็น img2 --->
<img id="img2" src='screen2.png' style="max-width: 100%" />
<!-- สร้าง check box โดยกำหนด id เป็น img2_check --->
<input type="checkbox" id="img2_check" /> เลือก
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body text-center">
<!-- แสดงรูปภาพ โดยกำหนด id เป็น img3 --->
<img id="img3" src='screen3.png' style="max-width: 100%" />
<!-- สร้าง check box โดยกำหนด id เป็น img3_check --->
<input type="checkbox" id="img3_check" /> เลือก
</div>
</div>
</div>
</div>
<br />
<div class="text-center">
<!-- สร้าง ปุ่ม Download Zip โดย เมื่อกด แล้วจะไปทำงานที่ function download_zip() --->
<button class="btn btn-primary" type="button" onclick="download_zip()">
Download Zip
</button>
</div>
</div>
<script>
//สร้าง function สำหรับ Download Zip ไฟล์
async function download_zip()
{
var zip = new JSZip();//สร้าง instance ของ object JSZip
var response=null;
var imageBlob=null;
if(document.getElementById("img1_check").checked)
{
//ถ้ามีการเลือก รูปที่ 1 ให้เพิ่มรูปที่ 1 ไปใน Zip ไฟล์
response = await fetch(document.getElementById("img1").src)
imageBlob = response.blob();
zip.file("img1.png", imageBlob, {base64: true});//ตั้งชื่อไฟล์รูปว่า img1.png
}
if(document.getElementById("img2_check").checked)
{
//ถ้ามีการเลือก รูปที่ 2 ให้เพิ่มรูปที่ 2 ไปใน Zip ไฟล์
response = await fetch(document.getElementById("img2").src)
imageBlob = response.blob();
zip.file("img2.png", imageBlob, {base64: true});//ตั้งชื่อไฟล์รูปว่า img2.png
}
if(document.getElementById("img3_check").checked)
{
//ถ้ามีการเลือก รูปที่ 3 ให้เพิ่มรูปที่ 3 ไปใน Zip ไฟล์
response = await fetch(document.getElementById("img3").src)
imageBlob = response.blob();
zip.file("img3.png", imageBlob, {base64: true});//ตั้งชื่อไฟล์รูปว่า img3.png
}
zip.generateAsync({type:"blob"}).then((content)=> {
//สั่งให้ Browser Download ไฟล์ Zip โดยตั้งชื่อว่า pictures.zip
saveAs(content, "pictures.zip");
});
}
</script>
</body>
</html>
ผลลัพธ์ที่ได้คือ https://xn--12cb3ech1bdffb0m0b3iuam.net/js_zip/js_zip.html