Data URI alternative

Question

My web app does not work well with long data URI that I use to display images. When the encoded data is shown within a text areas It gets unbelievably slow. Sometimes the entire page crashes when I click the download page button on my app if the data URI is somewhere in the DOM.

Is there an alternative to data URI? The user submits an image file from their computer and the data URI code is used like this to display the image <img src="dataURI"/>. This is not a server-based application so server-side languages aren't an option.

I have looked into JavaScript BLOB, although I have no idea how to work with that.

So you are loading an image specified by the user and putting the data URI into a text area? — James Westman, Nov 29 '14 at 03:55
Yes. It is necessary for my project, although Thats the least of my problem. What I need is a way to display those images, and still be able to download the page without having Chrome crash. Please see this post. Apparently the solution is BLOB http://stackoverflow.com/questions/16761927/aw-snap-when-data-uri-is-too-large — UserDy, Nov 29 '14 at 17:40

guest271314 · Accepted Answer · 2014-12-02T18:35:24.510

2

Edit, Updated

Try (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>

edited Dec 02 '14 at 18:35

answered Dec 01 '14 at 23:54

guest271314

1
15
104
177

This looks great. Although the image needs to be sown as both a background image of a div, and as an tag. Using a canvas is not an option. – UserDy Dec 02 '14 at 01:14
Just what I'm looking for. It seems to work well and the image source is really short. I want to use this solution, but I need to add the background image to a targeted element with a specific class. Please see my updated question above showing how I'm using the URI method to display both as a background image and as an . Can your code be converted to add the image to either a div as a background-image, or as a regular tag – UserDy Dec 02 '14 at 16:42
@UserDy Yes. At piece above, `url` variable is utilized for both `img` `src` and `background-image` `url()` . Try substituting `getActiveIMG.attr("src", url);` and `getActiveHolder.css("background-image","url("+ url +")");` for `image` variable ; and removing `FileReader()` pieces , which return `data-uri` instead of `objectURL`. – guest271314 Dec 02 '14 at 17:05
It seems like theres a bunch of extra stuff going on. In your script you are creating elements, although my elements are already in the DOM. I simply apply the image to those elements. Is there a simpler version of your code? One that on input change(image selection) gets the BLOB URL and stores it in a variable so that I can use it how I want? – UserDy Dec 02 '14 at 17:53
@UserDy `url` variable at piece is `objectURL` containing selected image file. Created elements for stacksnippets. If possible, can post `html` ? – guest271314 Dec 02 '14 at 18:01
Theres nothing special about the HTML, I updated the question above with the HTML. I simply would like to simplify your code as much as possible. I can handle selecting the elements and adding the variable BLOB appropriately, I wouldnt know what to remove because im not a raw javascript expert. – UserDy Dec 02 '14 at 18:14
@UserDy See updated post. Note: `jquery` at updated OP. Question not appear to be tagged `jquery` ?, utilized pure js for piece. – guest271314 Dec 02 '14 at 18:45

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

You can create an Image from File or Blob using URL.createObjectURL, which can then be set as img src, painted on canvas, or set as target of download link.

Example HTML:

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

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

The image displays on IE 11, Chrome 39, Firefox 33. The download link works in Chrome and Firefox, but is not supported in IE <=11. IE users will have to manually right click to save image.

edited May 23 '17 at 11:44

Community

1
1

answered Dec 01 '14 at 03:12

Sheepy

17,324
4
45
69

I fixed the crash issue by removing all URI before page download. I'm not looking to save an image, I want to display it in the page when the user selects it. – UserDy Dec 01 '14 at 15:42
@UserDy Congrat! I noticed "download page" so just in case. Glad to know it is now fixed. – Sheepy Dec 02 '14 at 02:22

Data URI alternative

2 Answers2