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>