javascript - 数据URI替代

我的Web应用程序无法用于显示图像的长数据URI。当在文本区域内显示编码数据时，它会变得异常缓慢。如果数据URI位于DOM中的某个位置，当我单击应用程序上的下载页面按钮时，有时整个页面会崩溃。

有数据URI的替代方法吗？用户从他们的计算机提交图像文件，并使用数据URI代码像这样显示图像<img src="dataURI"/>。这不是基于服务器的应用程序，因此无法选择服务器端语言。

我研究过JavaScript BLOB，尽管我不知道如何使用它。

最佳答案

编辑，更新

试试（v3）

html

<input id="change-image-input" type="file" accepts="image/*" />
<img src="BLOB HERE" alt="test" class="identify-selected-option-image"/>
<div></div>

js

var input = document.getElementById("change-image-input")
, div = document.querySelectorAll("div")[0]
, img = document.getElementsByClassName("identify-selected-option-image")[0];
input.addEventListener("change", function(e) {
  var file = e.target.files[0];
  var url = window.URL.createObjectURL(file);
  img.onload = function() {
    div.style.backgroundImage = "url('" + url + "')";
    div.style.width = img.width + "px";
    div.style.height = img.height + "px";
  }
  img.src = url;
});

var input = document.getElementById("change-image-input")
, div = document.querySelectorAll("div")[0]
, img = document.getElementsByClassName("identify-selected-option-image")[0];
input.addEventListener("change", function(e) {
  var file = e.target.files[0];
  var url = window.URL.createObjectURL(file);
  img.onload = function() {
    div.style.backgroundImage = "url('" + url + "')";
    div.style.width = img.width + "px";
    div.style.height = img.height + "px";
  }
  img.src = url;
});

<input id="change-image-input" type="file" accepts="image/*" />
<img src="BLOB HERE" alt="test" class="identify-selected-option-image"/>
<div></div>