8

What is the difference between data URI and data URL?

Look here. Both of these terms are used, but how are they different?

By the way, this is different from the posts mentioned to be possible duplicates. It's not a HTTP question ! This is javascript.

Community
  • 1
  • 1
Arian
  • 7,397
  • 21
  • 89
  • 177
  • 4
    Possible duplicate of [What is the difference between a URI, a URL and a URN?](https://stackoverflow.com/questions/176264/what-is-the-difference-between-a-uri-a-url-and-a-urn) – Adrian May 26 '17 at 20:42
  • https://danielmiessler.com/study/url-uri/ – richbai90 May 26 '17 at 20:42
  • No. This question is not the same as that one. My question is regarding the difference between these two terms in javascript language. – Arian May 26 '17 at 20:44
  • It doesnot matter. URL,URI and URN's mean the same in any language. Take a look at the 1st comment and : https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs – Tejas Kale May 26 '17 at 20:45
  • why the method name is URL ? and it returns dataURI ? why aren't both URI or both URL ? – Arian May 26 '17 at 20:46
  • 1
    @ArianHosseinzadeh javascript doesn't have different definitions of URI and URL (and URN), they are named and built based on the HTTP definitions – Patrick Barr May 26 '17 at 20:46
  • 1
    In my opinion, this is a fair question. The documentation is confusing, and the potential duplicate doesn't address the specific concern of @ArianHosseinzadeh – salezica May 26 '17 at 20:55

2 Answers2

9

URIs are a superset of URLs. All URLs are URIs, but some URIs are not URLs. This answer has the proper definitions. As you can surmise by reading them, there's a gray area that depends on context.

As for your specific question, getDataUrl() returns an URI. It is not a URL, since it doesn't really include any information regarding how to locate the resource externally. The function is not named appropriately, as the MDN link reflects.

But, this information is implicit: as the data blob lives inside the URI itself, there's only one place where it can be found. So you could argue, as you sip from your tea and adjust your monocle, that it is a URL, since no further clarification about protocol, schema or location is needed.

In other words, this is highly subject to interpretation. I wouldn't pay much mind to it.

salezica
  • 74,081
  • 25
  • 105
  • 166
2

I think your confusion arises from this

The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

Noting the usage of both toDataURL and the documentation calling the value a data URI. What it comes down to is that the method name for the canvas element to get a data URI is called toDataURL.

Since the URL must specify the location of the data, or in other words, the means by which it is accessed, (think http:// https:// etc) it probably doesn't fit the return value of HTMLCanvas.toDataURL() and so the documentation correctly calls the returned values a data URI. Why they decided to name the method toDataURL I couldn't say, except that the differences between the two are nuanced, and they may have felt it was easier to remember if they called it toDataURL

richbai90
  • 4,994
  • 4
  • 50
  • 85