javascript - 数据 URI 替代

Question

我的网络应用程序不能很好地处理我用来显示图像的长数据 URI。当编码数据显示在文本区域内时，它会变得非常慢。如果数据 URI 位于 DOM 中的某处，有时当我单击应用程序上的下载页面按钮时整个页面崩溃。

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

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

Answer 1

编辑、更新

尝试(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>