Difference between revisions of "DataURI"
(Created page with "Instead of referring to an image included in an add-on, an image path may also contain the image directly as a [https://en.wikipedia.org/wiki/Data_URI_scheme Data URI (wikiped...") |
(adding instructions for using Firefox to get Data URI) |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| − | Instead of referring to an image included in an add-on, an image path may also contain the image directly as a [https://en.wikipedia.org/wiki/Data_URI_scheme Data URI (wikipedia)]. This can be useful for add-on icons in the [[PblWML]] (which may otherwise only contain core images) or for single-file scenarios. Beyond these cases, Data URIs are less useful, as they are larger than the images themselves, and clutter up the files that include them. | + | Instead of referring to an image included in an add-on, an image path may also contain the image directly as a [https://en.wikipedia.org/wiki/Data_URI_scheme Data URI (wikipedia)]. This can be useful for add-on icons in the [[PblWML]] (which may otherwise only contain core images) or for single-file scenarios. |
| + | |||
| + | Beyond these cases, Data URIs are less useful, as they are larger than the images themselves, and clutter up the files that include them. | ||
== Format == | == Format == | ||
| Line 9: | Line 11: | ||
==== Schema ==== | ==== Schema ==== | ||
| − | The | + | The <code>data:</code> part specifies that this is a Data URI. |
==== Mime type ==== | ==== Mime type ==== | ||
| − | The | + | The <code>image/png</code> part specifies that this is a PNG image. Also supported is <code>image/jpeg</code>. |
===== base64 ===== | ===== base64 ===== | ||
| Line 24: | Line 26: | ||
=== Websites === | === Websites === | ||
| − | There are a large number of Data URI generator websites. Googling for [https://google.com/search?q=data+uri+generator data uri generator] will find them. | + | There are a large number of Data URI generator websites. Googling for [https://google.com/search?q=data+uri+generator data uri generator] will find them.<br /> |
| + | |||
| + | You may be able to directly copy the Data URI with your browser, without going to some strange website. The following works in Firefox 60.1: | ||
| + | * open ''image.png'' directly with browser | ||
| + | * open Inspector (Tools > Web Developer > Inspector) | ||
| + | * mouse over the ''src=file://...'' data, then select Copy > Image Data-URL | ||
| + | You now have the Data URI in your clipboard | ||
=== Manually === | === Manually === | ||
Creating a data URI by hand can be accomplished by taking your image, Base64-encoding it and formatting it as shown above. | Creating a data URI by hand can be accomplished by taking your image, Base64-encoding it and formatting it as shown above. | ||
Latest revision as of 13:06, 4 July 2018
Instead of referring to an image included in an add-on, an image path may also contain the image directly as a Data URI (wikipedia). This can be useful for add-on icons in the PblWML (which may otherwise only contain core images) or for single-file scenarios.
Beyond these cases, Data URIs are less useful, as they are larger than the images themselves, and clutter up the files that include them.
Contents
Format
A Data URI appears as follows: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
It can be split into the following sections:
data image/png;base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
Schema
The data: part specifies that this is a Data URI.
Mime type
The image/png part specifies that this is a PNG image. Also supported is image/jpeg.
base64
Technically part of the mime type, this specifies that the image data is encoded using Base64.
Data
The random-looking characters following the comma are the actual image data.
Creating a Data URI
Wesnoth does not yet support generating a Data URI for you, but there are alternatives.
Websites
There are a large number of Data URI generator websites. Googling for data uri generator will find them.
You may be able to directly copy the Data URI with your browser, without going to some strange website. The following works in Firefox 60.1:
- open image.png directly with browser
- open Inspector (Tools > Web Developer > Inspector)
- mouse over the src=file://... data, then select Copy > Image Data-URL
You now have the Data URI in your clipboard
Manually
Creating a data URI by hand can be accomplished by taking your image, Base64-encoding it and formatting it as shown above.