Parse `data:` URLs——模具行业从业者必备知识手册

system 2

<h2>Parse data: URLs</h2>

<p>This package helps you parse <code>data:</code> URLs <a href="https://fetch.spec.whatwg.org/#data-urls">according to the WHATWG Fetch Standard</a>:</p>

<pre><code>
const parseDataURL = require("data-urls");

const textExample = parseDataURL("data:,Hello%2C%20World!");
console.log(textExample.mimeType.toString()); // "text/plain;charset=US-ASCII"
console.log(textExample.body.toString()); // "Hello, World!"

const htmlExample = dataURL("data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E");
console.log(htmlExample.mimeType.toString()); // "text/html"
console.log(htmlExample.body.toString()); // <h1>Hello, World!</h1>

const pngExample = parseDataURL("data:image/png;base64,iVBORw0KGgoAAA" +
"ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4" +
"//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU" +
"5ErkJggg==");
console.log(pngExample.mimeType.toString()); // "image/png"
console.log(pngExample.body); // <Buffer 89 50 4e 47 0d ... >
</code></pre>

<p>This package's main module's default export is a function that accepts a string and returns a <code>{ mimeType, body }</code> object, or <code>null</code> if the result cannot be parsed as a <code>data:</code> URL.</p>

<ul>
<li>The <code>mimeType</code> property is an instance of <a href="https://www.npmjs.com/package/whatwg-mimetype">whatwg-mimetype</a>'s <code>MIMEType</code> class.</li>
<li>The <code>body</code> property is a Node.js <a href="https://nodejs.org/docs/latest/api/buffer.html"><code>Buffer</code></a> instance.</li>
</ul>

<p>As shown in the examples above, both of these have useful <code>toString()</code> methods for manipulating them as string values. However…</p>

<h4>A word of caution on string decoding</h4>

<p>Because Node.js's <code>Buffer.prototype.toString()</code> assumes a UTF-8 encoding, simply doing <code>dataURL.body.toString()</code> may not work correctly if the <code>data:</code> URL's contents were not originally written in UTF-8. This includes if the encoding is "US-ASCII", <a href="https://encoding.spec.whatwg.org/#names-and-labels">aka windows-1252</a>, which is notable for being the default in many cases.</p>

<p>A more complete decoding example would use the <a href="https://www.npmjs.com/package/whatwg-encoding">whatwg-encoding</a> package as follows:</p>

<pre><code>
const parseDataURL = require("data-urls");
const { labelToName, decode } = require("whatwg-encoding");

const dataURL = parseDataURL(arbitraryString);
const encodingName = labelToName(dataURL.mimeType.parameters.get("charset"));
const bodyDecoded = decode(dataURL.body, encodingName);
</code></pre>

<p>For example, given an <code>arbitraryString</code> of <code>data:,Hello!</code>, this will produce a <code>bodyDecoded</code> of <code>"Hello!"</code>, as expected. But given an <code>arbitraryString</code> of <code>"data:,Héllo!"</code>, this will correctly produce a <code>bodyDecoded</code> of <code>"Héllo!"</code>, whereas just doing <code>dataURL.body.toString()</code> will give back <code>"HÃllo!"</code>.</p>

<p>In summary, only use <code>dataURL.body.toString()</code> when you are very certain your data is inside the ASCII range (i.e. code points within the range U+0000 to U+007F).</p>

<h4>Advanced functionality: parsing from a URL record</h4>

<p>If you are using the <a href="https://github.com/jsdom/whatwg-url">whatwg-url</a> package, you may already have a "URL record" object on hand, as produced by that package's <code>parseURL</code> export. In that case, you can use this package's <code>fromURLRecord</code> export to save a bit of work:</p>

<pre><code>
const { parseURL } = require("whatwg-url");
const dataURLFromURLRecord = require("data-urls").fromURLRecord;

const urlRecord = parseURL("data:,Hello%2C%20World!");
const dataURL = dataURLFromURLRecord(urlRecord);
</code></pre>

<p>In practice, we expect this f</p>

<hr>
<p>有没有同行遇到过同样的问题？分享一下经验。</p>