จะบันทึกภาพไปยัง localStorage และแสดงในหน้าถัดไปได้อย่างไร?

ดังนั้นโดยทั่วไปฉันต้องอัปโหลดภาพเดียวบันทึกลงใน localStorage จากนั้นแสดงในหน้าถัดไป

ขณะนี้ฉันมีการอัปโหลดไฟล์ HTML ของฉัน:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

ซึ่งใช้ฟังก์ชั่นนี้เพื่อแสดงภาพบนหน้า

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

ภาพจะปรากฏขึ้นทันทีบนหน้าเพื่อให้ผู้ใช้เห็น พวกเขาจะถูกขอให้กรอกแบบฟอร์มที่เหลือ ส่วนนี้ทำงานได้อย่างสมบูรณ์

เมื่อแบบฟอร์มเสร็จสมบูรณ์แล้วพวกเขาก็กดปุ่ม 'บันทึก' เมื่อกดปุ่มนี้ฉันจะบันทึกอินพุตแบบฟอร์มทั้งหมดเป็นlocalStorageสตริง ฉันต้องการวิธีในการบันทึกภาพเป็นlocalStorageรายการด้วย

ปุ่มบันทึกจะนำพวกเขาไปยังหน้าใหม่ หน้าใหม่นี้จะแสดงข้อมูลผู้ใช้ในตารางโดยมีรูปภาพอยู่ด้านบน

ดังนั้นธรรมดาและเรียบง่ายที่ฉันต้องการที่จะบันทึกภาพในlocalStorageครั้งเดียว 'บันทึก' localStorageกดปุ่มแล้วกู้ภาพในหน้าถัดไปจาก

ผมพบว่าการแก้ปัญหาบางอย่างเช่นไวโอลินนี้และบทความนี้ที่ moz: // Hacks

แม้ว่าฉันยังคงสับสนอย่างมากเกี่ยวกับวิธีการทำงานนี้และฉันต้องการเพียงวิธีแก้ปัญหาง่ายๆ โดยทั่วไปฉันแค่ต้องค้นหาภาพผ่านgetElementByIDเมื่อกดปุ่ม 'บันทึก' แล้วประมวลผลและบันทึกภาพ

สำหรับผู้ที่ต้องการแก้ไขปัญหานี้ด้วย:

ประการแรกฉันคว้าภาพของฉันด้วยgetElementByIDและบันทึกภาพเป็น Base64 จากนั้นฉันบันทึกสตริง Base64 เป็นlocalStorageค่าของฉัน

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

นี่คือฟังก์ชั่นที่แปลงรูปภาพเป็นสตริง Base64:

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

จากนั้นในหน้าถัดไปของฉันฉันสร้างภาพด้วยช่องว่างsrcดังนี้:

<img src="" id="tableBanner" />

และตรงไปตรงมาเมื่อเพจโหลดฉันใช้สามบรรทัดถัดไปเพื่อรับสตริง Base64 จากlocalStorageและนำไปใช้กับรูปภาพด้วยที่ว่างเปล่าที่srcฉันสร้าง:

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

ทดสอบในเบราว์เซอร์และรุ่นที่แตกต่างกันค่อนข้างมากและดูเหมือนว่าจะทำงานได้ค่อนข้างดี

ฉันเขียนไลบรารี่ขนาด 2,2kb ของการบันทึกภาพใน localStorage JQueryImageCaching การใช้งาน:

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>

คุณสามารถทำให้ภาพเป็นอนุกรมใน Data URI มีบทช่วยสอนในโพสต์บล็อกนี้ นั่นจะสร้างสตริงที่คุณสามารถเก็บไว้ในที่จัดเก็บในตัวเครื่อง จากนั้นในหน้าถัดไปให้ใช้ data uri เป็นแหล่งที่มาของภาพ

"โปรดทราบว่าคุณต้องโหลดอิมเมจให้เต็มก่อน (ไม่เช่นนั้นจะมีอิมเมจที่ว่างเปล่า) ดังนั้นในบางกรณีคุณต้องห่อการจัดการ: bannerImage.addEventListener (" load ", function () {}); - ยูกะ 1 พ.ย. 17 เวลา 13:04 น. "

นี่เป็นสิ่งสำคัญอย่างยิ่ง หนึ่งในตัวเลือกที่ฉันกำลังสำรวจช่วงบ่ายนี้คือการใช้วิธีการโทรกลับด้วยจาวาสคริปต์แทนที่จะใช้ addEventListeners เนื่องจากดูเหมือนว่าจะไม่สามารถผูกได้อย่างถูกต้อง เตรียมองค์ประกอบทั้งหมดให้พร้อมก่อนโหลดหน้าเว็บโดยไม่ต้องรีเฟรชหน้า

หากใครสามารถขยายได้โปรดทำตามที่คุณใช้ในการตั้งค่าการรอคอยการติดต่อกลับหรือวิธีการ addEventListener เพื่อให้ได้ผลลัพธ์ที่ต้องการ ตัวไหนและทำไม

ฉันเกิดปัญหาเดียวกันขึ้นมาแทนที่จะเก็บภาพซึ่งในที่สุดก็ล้นหน่วยความจำภายในคุณเพียงแค่เก็บเส้นทางไปยังภาพ สิ่งที่ต้องการ:

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);