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
37
votes
3 answers

Compressing base64 data uri images

Problem I'm creating multiple charts that are then sent to the server to create a PDF. This data can get large. Question What is the best way to compress and send the image data to the server Background The charts I'm creating are fairly complex, to…
David Nguyen
  • 8,368
  • 2
  • 33
  • 49
36
votes
4 answers

Converting a data URI back to SVG

Might be a silly question but is it possible to convert a data URI back to SVG? I've Googled & searched SO and found nothing on the subject, loads of stuff on the other way round of course. Thanks! Edit: sorry should've been more specific - a…
Ali Green
  • 599
  • 1
  • 5
  • 16
33
votes
2 answers

Convert HTML to data:text/html link using JavaScript

Here's my HTML: View it in your browser

Doggies

Kitties

How do I use JavaScript to make the href attribute of my link point to a base64 encoded webpage whose source is the…
Web_Designer
  • 72,308
  • 93
  • 206
  • 262
31
votes
4 answers

How to get a rotated linear gradient svg for use as a background image?

I've seen a few questions dancing around this, so I hope this isn't too redundant. Ideally, I'd like an image/svg+xml which scales to 100% of it's container. Colorzilla gets me a great start with a data:image/svg+xml
bodine
  • 1,763
  • 4
  • 19
  • 28
28
votes
8 answers

Rapidly updating image with Data URI causes caching, memory leak

I have a webpage that rapidly streams JSON from the server and displays bits of it, about 10 times/second. One part is a base64-encoded PNG image. I've found a few different ways to display the image, but all of them cause unbounded memory usage. It…
Dave Ceddia
  • 1,480
  • 2
  • 17
  • 24
27
votes
5 answers

Filename of downloaded file in data:Application/octet-stream;

I am trying to download a file using data uri in following manner: The…
parbi
  • 533
  • 1
  • 10
  • 19
26
votes
3 answers

Data URI link This simple code works perfectly everywhere except Microsoft Edge: link [JSFiddle] In Microsoft Edge I'm getting "That's odd...Microsoft can't find this page" error: Examples from Mozilla…

Limon Monte
  • 52,539
  • 45
  • 182
  • 213
24
votes
2 answers

Can you send images in data:uri format to GMail?

I'm making a web app in Django that sends user an image to their email. The way that seems most attractive to me for sending the image is in the data:uri format. However, I tested sending this email with a data:uri image in it to my GMail account,…
Ram Rachum
  • 84,019
  • 84
  • 236
  • 374
23
votes
2 answers

Content-Security-Policy (CSP): how to allow svg image in object

I am using the js plugin that adds inside itself SVG images. I have added CSP policy to my website, but I can't configure it to allow plugin's code. Its code looks like: label=$("
RredCat
  • 5,259
  • 5
  • 60
  • 100
22
votes
1 answer

How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?

This Question is related to and inspired by How to updoad in old browsers (ex Safari 5.1.4) Given an element having a files property containing File objects which inherit from Blob, is it possible to create a ArrayBuffer and…
guest271314
  • 1
  • 15
  • 104
  • 177
21
votes
4 answers

Img url to dataurl using JavaScript

Using JavaScript, I want to convert an img tag like this: File Icon Into one with a dataurl like this:
adam0101
  • 29,096
  • 21
  • 96
  • 174
20
votes
4 answers

Python requests base64 image

I am using requests to get the image from remote URL. Since the images will always be 16x16, I want to convert them to base64, so that I can embed them later to use in HTML img tag. import requests import base64 response =…
nickbusted
  • 1,029
  • 4
  • 18
  • 30
19
votes
4 answers

Convert byte string to base64-encoded string (output not being a byte string)

I was wondering if it is possible to convert a byte string which I got from reading a file to a string (so type(output) == str). All I've found on Google so far has been answers like How do you base-64 encode a PNG image for use in a data-uri in a…
Joeytje50
  • 18,636
  • 15
  • 63
  • 95
18
votes
7 answers

decode base64 svg data to a svg file

I have a file containing a svg image which is base64 encoded (data-uri). The file starts with data:image/svg+xml;base64,PHN.... How to decode this to a .svg file in linux ?
ni_hao
  • 404
  • 2
  • 5
  • 16
18
votes
2 answers

Data URI - how to create them in Java?

I have just been told to send the thumbnail of an image using data URI. I have been searching it but all I found was that its basically a textual representation of a file and can be directly used in HTML. I could not really find how to make a data…
Khizar
  • 2,288
  • 5
  • 32
  • 53
1
2
3
…
39 40