Difference between revisions of "DataURI"

From The Battle for Wesnoth Wiki
(adding instructions for using Firefox to get Data URI)
 
(One intermediate revision by one other user not shown)
Line 11: Line 11:
  
 
==== Schema ====
 
==== Schema ====
The `data:` part specifies that this is a Data URI.
+
The <code>data:</code> part specifies that this is a Data URI.
  
 
==== Mime type ====
 
==== Mime type ====
The `image/png` part specifies that this is a PNG image. Also supported is `image/jpeg`.
+
The <code>image/png</code> part specifies that this is a PNG image. Also supported is <code>image/jpeg</code>.
  
 
===== base64 =====
 
===== base64 =====
Line 26: 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.

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.

This page was last edited on 4 July 2018, at 13:06.