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.

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.

• javascript

• 4 Possible duplicate of What is the difference between a URI, a URL and a URN? – Adrian Commented May 26, 2017 at 20:42
• danielmiessler./study/url-uri – richbai90 Commented May 26, 2017 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 Commented May 26, 2017 at 20:44
• 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 Commented May 26, 2017 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 Commented May 26, 2017 at 20:55

2 Answers 2

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.

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 es 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