时间戳

首页 > 解决方案 > 在 Web 上显示本地图像文件

javascript - 在 Web 上显示本地图像文件

问题描述

我正在开发一个网站来推荐衣服。所以，我希望客户把他们的形象放在他们当地的地方。

首先，我尝试了<input type='file' accept='image/*' ~~>. 但它不提供自定义选项。我必须用我的照片显示按钮。因此我尝试了按钮选项并编写了这样的代码。

function openImageFile() {
  var input = document.createElement("input");

  input.type = "file";
  input.accept = "image/*";

  input.click();
  input.onchange = function(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function() {
      var dataurl = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
      output.width = 125;
      output.height = 125;
    };
    photo = input.files[0];
    reader.readAsDataURL(input.files[0]);
  }
}
<button type="button" id="test" onclick="openImageFile()"><img src="blah.png"></button>
<img id='output'>`

标签： javascripthtmllocallocal-files

解决方案

将您的图像转换为数据协议。转换器：https ://base64.guru/converter/encode/image 将图像元素的 src 设置为：

<image src="data:image/png;base64,OUPUT_FROM_ENCODER" />

这允许您的网站加载图像而无需由 URL 托管

推荐阅读