如何通过onclick事件将图片保存到localStorage（JavaScript）

需求为无需后端支持，实现点击页面中的图片后将其存入localStorage，在结算页面读取并显示。此前找到的是通过文件上传实现图片存localStorage的代码，现将其改造为点击触发的版本，核心思路是通过Canvas将图片转为Base64格式存入localStorage，再在目标页面读取还原。

原文件上传参考代码 #

这是最初找到的通过文件上传实现图片存localStorage的代码：

JavaScript #

(function () {
    /** @type {Node} */
    var imgInput = document.getElementById("image-input"),
      /** @type {Node} */
      imgContainer = document.getElementById("image-container"),
      /** Restore image src from local storage */
      updateUi = function () {
        imgContainer.src = window.localStorage.getItem("image-base64");
      },
      /** Register event listeners */
      bindUi = function () {
        imgInput.addEventListener("change", function () {
          if (this.files.length) {
            var reader = new FileReader();
            reader.onload = function (e) {
              window.localStorage.setItem("image-base64", e.target.result);
              updateUi();
            };
            reader.readAsDataURL(this.files[0]);
          }
        }, false);
      };

    updateUi();
    bindUi();
  }());

HTML #

<input type="file" id="image-input" />
<img id="image-container" />

改造后的点击触发解决方案 #

页面1（商品展示/触发页） #

通过点击图片触发事件，将图片转为Base64后存入localStorage，并打开结算页：

JavaScript

function openImageInNewPage() {
    var imgData = getBase64Image(document.getElementById('bannerImg'));
    localStorage.setItem("imgData", imgData);
    window.open("TESTING4.html");
}

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,/, "");
}

HTML

<img id="bannerImg" src="/resources/images/beatsbydre.jpg" onclick="openImageInNewPage()" />

页面2（结算页） #

读取localStorage中存储的Base64数据，还原为图片显示：

JavaScript

var imgData = localStorage.getItem("imgData");
var img = document.getElementById("displayedImage");
img.src = "data:image/png;base64," + imgData;

HTML

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

方案说明 #

该方案利用Canvas的绘图能力，将目标图片绘制到Canvas上，再通过toDataURL方法将Canvas内容转为Base64编码的字符串，存入localStorage。在结算页，读取该Base64字符串，拼接为图片的Data URL格式赋值给img元素的src属性，从而实现图片的跨页面展示。

内容的提问来源于stack exchange，提问作者bkw