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;
});

＆＃13;

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;
});

＆＃13;

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

＆＃13;

Answer 2

您可以使用create an Image从文件或Blob中URL.createObjectURL，然后可以将其设置为img src，绘制在画布上，或设置为下载链接的目标。

示例HTML：

<!DOCTYPE html>
<input type="file" onchange="update()" />
<a download><img alt="Please select a photo" /></a>

和JavaScript：

function update() {
   var a = document.querySelector( 'a' );
   var f = document.querySelector( 'input' ).files;
   var url = window.URL || window.webkitURL;
   if ( ! f || ! f.length ) return;
   a.href = document.querySelector( 'img' ).src = url.createObjectURL( f[0] );
}

图像显示在IE 11，Chrome 39，Firefox 33上。下载链接适用于Chrome和Firefox，但IE＆lt; = 11不支持。 IE用户必须手动右键单击才能保存图像。

数据URI替代方案

2 个答案: