如何获取输入类型=图像的值并将其显示在图像上？答案

【问题标题】：How to get value of input type = image and display it on image?如何获取输入类型=图像的值并将其显示在图像上？
【发布时间】：2020-04-19 09:35:11
【问题描述】：

我正在寻找一个示例，其中 <input type="file"> 的值可以存储到一个变量中，然后从那里存储到 localStorage 所以刷新页面时它不会丢失，我找不到我正在寻找的解决方案。

function myFunction() {

  //Get value of input type file
  let userInput = document.getElementById("uploadImage").value;

  //Store value into LocalStorage
  localStorage.setItem("image", JSON.stringify(userInput))
}

// Display "image" in Local storage as src of img preview even after page refreshes
document.getElementById("imagePreview").setAttribute("src", JSON.parse(localStorage.getItem("image")))

img {
  max-width: 300px;
}

<input type="file" accept="image/*" id="uploadImage">
<br>
<button onclick="myFunction()">
  Submit Picture
</button>
<br>
<img id="imagePreview">

总而言之，我想知道如何将输入值保存到变量中，然后将变量保存到本地存储中。最后，将 localStorage 显示在一个图像标签中，这样在页面刷新时它就不会丢失。如果您有任何问题，请告诉我，因为我知道这可能有点令人困惑。这是一个 jsFiddle，如下所示：https://jsfiddle.net/vedt_/zrvuwbj7/44/#&togetherjs=gbLynsQ627 如果您知道如何操作，请随时对其进行编辑。

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以将图片转换为base64并存储如下：

function myFunction() {
     const file = document.querySelector('#uploadImage').files[0];
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function () {
     localStorage.setItem("image", reader.result);
     document.getElementById("imagePreview").setAttribute("src", localStorage.getItem("image"))
     };
}
if(localStorage.getItem("image"))
     document.getElementById("imagePreview").setAttribute("src", localStorage.getItem("image"))

img {
	max-width: 300px;
}

<input type="file" accept="image/*" id="uploadImage"><br>
<button onclick="myFunction()">Submit Picture</button><br>
<img id="imagePreview">

【讨论】：

【解决方案2】：

首先，您应该使用 FileAPI 读取上传文件的内容。
因此，您阅读它，然后将其内容转换为 base64，最后您可以将它们存储在 localStorage 中。

您还需要创建一个 <canvas> 元素来将图像转换为 base64。

这是您的代码：

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" accept="image/*" id="uploadImage">
<br>
<button onclick="myFunction()">
  Submit Picture
</button>
<br>
<img id="imagePreview">

CSS：

img {
   max-width: 300px;
}

JavaScript：

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

document.getElementById("uploadImage").addEventListener("change", function() {
  if (document.getElementById('uploadImage').files && document.getElementById('uploadImage').files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#imagePreview').attr('src', e.target.result);
    }

    reader.readAsDataURL(document.getElementById('uploadImage').files[0]); // convert to base64 string
  }
});

$("#imgInp").change(function() {
  readURL(this);
});

function myFunction() {
   bannerImage = document.getElementById('imagePreview');
   imgData = getBase64Image(bannerImage);
   localStorage.setItem("imgData", imgData);
}

这是一个现场演示：https://codepen.io/marchmello/pen/rNOLJya

【讨论】：