Stack Overflow
Stack Overflow

Questions tagged [data-uri]

A data URI is a URL whose scheme part is 'data:' and which directly represents a resource, rather than the location of a resource.

The following is an example of a data URI:

data:text/html;base64,PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPg
ogICAgPG1ldGEgY2hhcnNldD11dGYtOD4KICAgIDx0aXRsZT5UaGVyZSBpcyBuby
BzcG9vbi48L3RpdGxlPgogICAgPHN0eWxlPgogICAgICBodG1sIHsgYmFja2dyb3
VuZDogI2ZhNTsgaGVpZ2h0OiAxMDAlIH0KICAgICAgcCB7IGNvbG9yOiAjNWFmOy
B0ZXh0LWFsaWduOiBjZW50ZXI7IG1hcmdpbjogNmVtOyBmb250LXNpemU6IDJlbS
B9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPjxhIGhyZW
Y9aHR0cDovL3N0YWNrb3ZlcmZsb3cuY29tL3RhZ3MvZGF0YS11cmkvaW5mbz5CYW
NrPC9hPjwvcD4KICA8L2JvZHk+CjwvaHRtbD4K

That data URI contains a HTML document. If pasted into the address bar of a compliant browser, the document it contains will be displayed without the need to request any external resources.

Data URIs can be used in the href or src attributes of <a> and <img> elements, etc., eliminating the need for additional HTTP requests.

592 questions
484
votes
12 answers

Is embedding background image data into CSS as Base64 good or bad practice?

I was looking at the source of a greasemonkey userscript and noticed the following in their css: .even { background: #fff…
Dimitar Christoff
  • 26,147
  • 8
  • 50
  • 69
272
votes
17 answers

Is there any way to specify a suggested filename when using data: URI?

If for example you follow the link: data:application/octet-stream;base64,SGVsbG8= The browser will prompt you to download a file consisting of the data held as base64 in the hyperlink itself. Is there any way of suggesting a default name in the…
MontyGomery
192
votes
14 answers

Download data URL file

I'm playing with the idea of making a completely JavaScript-based zip/unzip utility that anyone can access from a browser. They can just drag their zip directly into the browser and it'll let them download all the files within. They can also create…
Mikee
  • 2,403
  • 2
  • 18
  • 16
143
votes
7 answers

Drawing an image from a data URL to a canvas

How can i open an image in a Canvas ? which is encoded I am using the var strDataURI = oCanvas.toDataURL(); The output is the encoded base 64 image. How can i draw this image on a canvas? I want to use the strDataURI and create the Image ? Is…
Yahoo
  • 4,093
  • 17
  • 59
  • 85
111
votes
4 answers

What is Data URI support like in major email client software?

Data URIs are a standard way to embed images and other binary data in HTML, and browser support is well documented on the web. (IE8 was the first version of IE to support Data URI, with a max 32 KB size per URI; other major browsers have supported…
joelhardi
  • 11,039
  • 3
  • 32
  • 38
102
votes
3 answers

Animated icon in email subject

I know about Data URIs in which base64 encoded data can be used inline such as images. Today I received an email actually an spam one in which there was an animated (gif) icon in its subject: Here is the icon alone: So the only thing did cross my…
revo
  • 47,783
  • 14
  • 74
  • 117
102
votes
12 answers

How to create a Web Worker from a string

How can I use create a Web worker from a string (which is supplied via a POST request)? One way I can think of, but I'm not sure how to implement it, is by creating a data-URI from the server response, and passing that to the Worker constructor, but…
bigblind
  • 12,539
  • 14
  • 68
  • 123
101
votes
2 answers

Send a base64 image in HTML email

Using a rich-text editor, our users can drag and drop a saved image from their desktop to the editor. The image appears and displays properly in the web page after they submit. Since the image is not uploaded anywhere, the editor saves the image as…
Vael Victus
  • 3,966
  • 7
  • 34
  • 55
87
votes
7 answers

Blank image encoded as data-uri

I've built an image slider (based on the terrific bxSlider) which will preload images just-in-time before they slide into view. It's working pretty well already, but I don't think my solution is valid HTML. My technique is as follows: I generate the…
Jens Roland
  • 27,450
  • 14
  • 82
  • 104
78
votes
4 answers

what does this mean ? image/png;base64?

I don't know what we call this. but i found a image at google…
Adam Ramadhan
  • 22,712
  • 28
  • 84
  • 124
77
votes
2 answers

Should setting an image src to data URL be available immediately?

Consider the following (fragile) JavaScript code: var img = new Image; img.src = "data:image/png;base64,..."; // Assume valid data // Danger(?) Attempting to use image immediately after setting src console.log( img.width, img.height…
Phrogz
  • 296,393
  • 112
  • 651
  • 745
68
votes
7 answers

How do you base-64 encode a PNG image for use in a data-uri in a CSS file?

I want to base-64 encode a PNG file, to include it in a data:url in my stylesheet. How can I do that? I’m on a Mac, so something on the Unix command line would work great. A Python-based solution would also be grand.
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
56
votes
4 answers

PHP Data-URI to file

I have a data URI I am getting from javascript and trying to save via php. I use the following code which gives a apparently corrupt image file: $data = $_POST['logoImage']; $uri = substr($data,strpos($data,",")+1); …
GAgnew
  • 3,847
  • 3
  • 26
  • 28
51
votes
5 answers

Why use data URI scheme?

Basically the question is in the title. Many people have had the question stackoverflow of how to create a data URI and problems therein. My question is why use data URI? What are the advantages to doing:
Naftali
  • 144,921
  • 39
  • 244
  • 303
44
votes
1 answer

"Aw, Snap" when data uri is too large

I'm writing a chrome extension which does the following: Downloads a file from a website to memory using XMLHttpRequest Adds additional data to the file and then base64 encodes the result to the variable total_encoded_data Offers the data to the…
amccormack
  • 13,207
  • 10
  • 38
  • 61
1
2 3
…
39 40