Cách lưu hình ảnh vào localStorage và hiển thị hình ảnh đó trên trang tiếp theo?

Question

Vì vậy, về cơ bản, tôi cần phải làm như các tiểu bang tiêu đề; Tải lên một hình ảnh duy nhất, lưu nó vào localStorage, sau đó hiển thị nó trên trang tiếp theo.

Hiện nay, tôi có tập tin HTML tải lên của tôi:

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

Trong đó sử dụng chức năng này để hiển thị hình ảnh trên trang

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]); 
    } 
} 

Những hình ảnh được hiển thị ngay lập tức trên trang cho người sử dụng xem. Sau đó, họ được yêu cầu điền vào phần còn lại của mẫu đơn. Phần này hoạt động hoàn hảo.

Khi biểu mẫu hoàn tất, sau đó nhấn nút 'Lưu'. Khi nhấn nút này, tôi lưu tất cả các đầu vào của biểu mẫu dưới dạng các chuỗi localStorage. Tôi cần một cách để lưu hình ảnh dưới dạng mục localStorage.

Nút lưu cũng sẽ hướng họ đến trang mới. Trang mới này sẽ hiển thị dữ liệu người dùng trong một bảng, với hình ảnh ở trên cùng.

Vì vậy, đơn giản và đơn giản, tôi cần lưu hình ảnh trong localStorage sau khi nhấn nút 'Lưu' và sau đó mượn hình ảnh trên trang tiếp theo từ localStorage.

tôi tìm thấy một số giải pháp như fiddle này: http://jsfiddle.net/8V9w6/

Và đây: https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

Mặc dù tôi vẫn còn vô cùng bối rối về cách làm việc này, và tôi chỉ thực sự cần một giải pháp đơn giản. Về cơ bản, tôi chỉ cần tìm hình ảnh qua getElementByID sau khi nhấn nút 'Lưu', sau đó xử lý và lưu hình ảnh.

Tất cả trợ giúp đều được đánh giá cao. Cảm ơn!

Answer 1

Để bất cứ ai cũng cần giải quyết vấn đề này:

Trước hết, tôi lấy hình ảnh của tôi với getElementByID và lưu hình ảnh như một Base64. Sau đó, tôi lưu chuỗi Base64 làm giá trị localStorage của mình.

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

Dưới đây là các chức năng có thể chuyển đổi hình ảnh vào một sting 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,/, ""); 
} 

Sau đó, trên trang tiếp theo của tôi, tôi đã tạo ra một hình ảnh với một src trống như vậy:

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

Và ngay khi tải trang, tôi sử dụng ba dòng tiếp theo để lấy chuỗi base64 từ localstorage và áp dụng nó vào hình ảnh với src trống mà tôi đã tạo:

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

Đã thử nghiệm trong một vài trình duyệt và phiên bản khác nhau và có vẻ như nó hoạt động khá tốt.

Answer 2

Bạn có thể tuần tự hóa hình ảnh thành URI dữ liệu. Có một hướng dẫn trong số blog post này. Điều đó sẽ tạo ra một chuỗi bạn có thể lưu trữ trong bộ nhớ cục bộ. Sau đó trên trang tiếp theo, sử dụng dữ liệu uri làm nguồn của hình ảnh.

Answer 3

tôi đã viết một chút thư viện 2,2kb của hình ảnh tiết kiệm trong localStorage JQueryImageCaching Cách sử dụng:

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