28:null 29:["$","title",null,{"children":"Hello, png-metadata | Christoph Pahmeyer | Observable"}] 2e:T32c1,png_metadata = { /** * library to read and write PNG Metadata * * References: * w3 PNG Chunks specification: https://www.w3.org/TR/PNG-Chunks.html * The Metadata in PNG files: https://dev.exiv2.org/projects/exiv2/wiki/The_Metadata_in_PNG_files */ // Used for fast-ish conversion between uint8s and uint32s/int32s. // Also required in order to remain agnostic for both Node Buffers and // Uint8Arrays. let uint8 = new Uint8Array(4); let int32 = new Int32Array(uint8.buffer); let uint32 = new Uint32Array(uint8.buffer); const RESOLUTION_UNITS = { UNDEFINED: 0, METERS: 1, INCHES: 2 }; /** * https://github.com/aheckmann/sliced * An Array.prototype.slice.call(arguments) alternative * @param {Object} args something with a length * @param {Number} slice * @param {Number} sliceEnd * @api public */ function sliced(args, slice, sliceEnd) { var ret = []; var len = args.length; if (0 === len) return ret; var start = slice < 0 ? Math.max(0, slice + len) : slice || 0; if (sliceEnd !== undefined) { len = sliceEnd < 0 ? sliceEnd + len : sliceEnd; } while (len-- > start) { ret[len - start] = args[len]; } return ret; } /** * https://github.com/hughsk/png-chunk-text * Returns a chunk object containing the metadata for a given key and value: * @param keyword * @param content * @param chunkName * @returns {{data: Uint8Array, name: 'tEXt'}} */ function textEncode(keyword, content, chunkName = "tEXt") { keyword = String(keyword); content = String(content); if ( content.length && (!/^[\x00-\xFF]+$/.test(keyword) || !/^[\x00-\xFF]+$/.test(content)) ) { throw new Error( "Only Latin-1 characters are permitted in PNG tEXt chunks. You might want to consider base64 encoding and/or zEXt compression" ); } if (keyword.length >= 80) { throw new Error( 'Keyword "' + keyword + '" is longer than the 79-character limit imposed by the PNG specification' ); } let totalSize = keyword.length + content.length + 1; let output = new Uint8Array(totalSize); let idx = 0; let code; for (let i = 0; i < keyword.length; i++) { if (!(code = keyword.charCodeAt(i))) { throw new Error("0x00 character is not permitted in tEXt keywords"); } output[idx++] = code; } output[idx++] = 0; for (let j = 0; j < content.length; j++) { if (!(code = content.charCodeAt(j))) { throw new Error("0x00 character is not permitted in tEXt content"); } output[idx++] = code; } return { name: chunkName, data: output }; } /** * https://github.com/hughsk/png-chunk-text * Reads a Uint8Array or Node.js Buffer instance containing a tEXt PNG chunk's data and returns its keyword/text: * @param data * @returns {{text: string, keyword: string}} */ function textDecode(data) { if (data.data && data.name) { data = data.data; } let naming = true; let text = ""; let name = ""; for (let i = 0; i < data.length; i++) { let code = data[i]; if (naming) { if (code) { name += String.fromCharCode(code); } else { naming = false; } } else { if (code) { text += String.fromCharCode(code); } else { throw new Error( "Invalid NULL character found. 0x00 character is not permitted in tEXt content" ); } } } return { keyword: name, text: text }; } /** * https://github.com/hughsk/png-chunks-extract * Extract the data chunks from a PNG file. * Useful for reading the metadata of a PNG image, or as the base of a more complete PNG parser. * Takes the raw image file data as a Uint8Array or Node.js Buffer, and returns an array of chunks. Each chunk has a name and data buffer: * @param data {Uint8Array} * @returns {[{name: String, data: Uint8Array}]} */ function extractChunks(data) { if (data[0] !== 0x89) throw new Error("Invalid .png file header"); if (data[1] !== 0x50) throw new Error("Invalid .png file header"); if (data[2] !== 0x4e) throw new Error("Invalid .png file header"); if (data[3] !== 0x47) throw new Error("Invalid .png file header"); if (data[4] !== 0x0d) throw new Error( "Invalid .png file header: possibly caused by DOS-Unix line ending conversion?" ); if (data[5] !== 0x0a) throw new Error( "Invalid .png file header: possibly caused by DOS-Unix line ending conversion?" ); if (data[6] !== 0x1a) throw new Error("Invalid .png file header"); if (data[7] !== 0x0a) throw new Error( "Invalid .png file header: possibly caused by DOS-Unix line ending conversion?" ); let ended = false; let chunks = []; let idx = 8; while (idx < data.length) { // Read the length of the current chunk, // which is stored as a Uint32. uint8[3] = data[idx++]; uint8[2] = data[idx++]; uint8[1] = data[idx++]; uint8[0] = data[idx++]; // Chunk includes name/type for CRC check (see below). let length = uint32[0] + 4; let chunk = new Uint8Array(length); chunk[0] = data[idx++]; chunk[1] = data[idx++]; chunk[2] = data[idx++]; chunk[3] = data[idx++]; // Get the name in ASCII for identification. let name = String.fromCharCode(chunk[0]) + String.fromCharCode(chunk[1]) + String.fromCharCode(chunk[2]) + String.fromCharCode(chunk[3]); // The IHDR header MUST come first. if (!chunks.length && name !== "IHDR") { throw new Error("IHDR header missing"); } // The IEND header marks the end of the file, // so on discovering it break out of the loop. if (name === "IEND") { ended = true; chunks.push({ name: name, data: new Uint8Array(0) }); break; } // Read the contents of the chunk out of the main buffer. for (let i = 4; i < length; i++) { chunk[i] = data[idx++]; } // Read out the CRC value for comparison. // It's stored as an Int32. uint8[3] = data[idx++]; uint8[2] = data[idx++]; uint8[1] = data[idx++]; uint8[0] = data[idx++]; let crcActual = int32[0]; let crcExpect = crc32.buf(chunk); if (crcExpect !== crcActual) { throw new Error( "CRC values for " + name + " header do not match, PNG file is likely corrupted" ); } // The chunk data is now copied to remove the 4 preceding // bytes used for the chunk name/type. let chunkData = new Uint8Array(chunk.buffer.slice(4)); chunks.push({ name: name, data: chunkData }); } if (!ended) { throw new Error(".png file ended prematurely: no IEND header was found"); } return chunks; } /** * https://github.com/hughsk/png-chunks-encode * Return a fresh PNG buffer given a set of PNG chunks. Useful in combination with png-chunks-encode to easily modify or add to the data of a PNG file. * Takes an array of chunks, each with a name and data: * @param chunks {[{name: String, data: Uint8Array}]} * @returns {Uint8Array} */ function encodeChunks(chunks) { let totalSize = 8; let idx = totalSize; let i; for (i = 0; i < chunks.length; i++) { totalSize += chunks[i].data.length; totalSize += 12; } let output = new Uint8Array(totalSize); output[0] = 0x89; output[1] = 0x50; output[2] = 0x4e; output[3] = 0x47; output[4] = 0x0d; output[5] = 0x0a; output[6] = 0x1a; output[7] = 0x0a; for (i = 0; i < chunks.length; i++) { let chunk = chunks[i]; let name = chunk.name; let data = chunk.data; let size = data.length; let nameChars = [ name.charCodeAt(0), name.charCodeAt(1), name.charCodeAt(2), name.charCodeAt(3) ]; uint32[0] = size; output[idx++] = uint8[3]; output[idx++] = uint8[2]; output[idx++] = uint8[1]; output[idx++] = uint8[0]; output[idx++] = nameChars[0]; output[idx++] = nameChars[1]; output[idx++] = nameChars[2]; output[idx++] = nameChars[3]; for (let j = 0; j < size; ) { output[idx++] = data[j++]; } let crcCheck = nameChars.concat(sliced(data)); int32[0] = crc32.buf(crcCheck); output[idx++] = uint8[3]; output[idx++] = uint8[2]; output[idx++] = uint8[1]; output[idx++] = uint8[0]; } return output; } /** * read 4 bytes number from UInt8Array. * @param uint8array * @param offset * @returns {number} */ function readUint32(uint8array, offset) { let byte1, byte2, byte3, byte4; byte1 = uint8array[offset++]; byte2 = uint8array[offset++]; byte3 = uint8array[offset++]; byte4 = uint8array[offset]; return 0 | (byte1 << 24) | (byte2 << 16) | (byte3 << 8) | byte4; } /** * write 4 bytes number to UInt8Array. * @param uint8array * @param num * @param offset */ function writeUInt32(uint8array, num, offset) { uint8array[offset] = (num & 0xff000000) >> 24; uint8array[offset + 1] = (num & 0x00ff0000) >> 16; uint8array[offset + 2] = (num & 0x0000ff00) >> 8; uint8array[offset + 3] = num & 0x000000ff; } /** * Get object with PNG metadata. only tEXt and pHYs chunks are parsed * @param buffer {Buffer} * @returns {{tEXt: {keyword: value}, pHYs: {x: number, y: number, units: RESOLUTION_UNITS}, [string]: true}} */ function readMetadata(buffer) { let result = {}; const chunks = extractChunks(buffer); chunks.forEach((chunk) => { switch (chunk.name) { case "tEXt": if (!result.tEXt) { result.tEXt = {}; } let textChunk = textDecode(chunk.data); result.tEXt[textChunk.keyword] = textChunk.text; break; case "pHYs": result.pHYs = { // Pixels per unit, X axis: 4 bytes (unsigned integer) x: readUint32(chunk.data, 0), // Pixels per unit, Y axis: 4 bytes (unsigned integer) y: readUint32(chunk.data, 4), unit: chunk.data[8] }; break; case "gAMA": case "cHRM": case "sRGB": case "IHDR": case "iCCP": default: result[chunk.name] = true; } }); return result; } /** * create new Buffer with metadata. only tEXt and pHYs chunks are supported. * @param buffer {Buffer} * @param metadata {{tEXt: {keyword: value}, pHYs: {x: number, y: number, units: RESOLUTION_UNITS}}} * @returns {Buffer} */ function writeMetadata(buffer, metadata) { const chunks = extractChunks(buffer); insertMetadata(chunks, metadata); return new Buffer.from(encodeChunks(chunks)); } /** * the same. but for Blobs * @param blob {Blob} * @param metadata {{tEXt: {keyword: value}, pHYs: {x: number, y: number, units: RESOLUTION_UNITS}}} * @returns {Promise} new blob */ /* TODO: Re-implement if known where the fabric function comes from, since https://www.npmjs.com/package/fabric doesn't include this. async function writeMetadataB(blob, metadata) { let arrayBuffer = await blob.arrayBuffer(); let uint8Array = new Uint8Array(arrayBuffer); let newBuffer = fabric.util.png.writeMetadata(uint8Array, {}); return new Blob([newBuffer], { type: blob.type }); } */ function insertMetadata(chunks, metadata) { if (metadata.clear) { for (let i = chunks.length - 1; i--; ) { switch (chunks[i].name) { case "IHDR": case "IDAT": case "IEND": break; default: chunks.splice(i, 1); } } } if (metadata.tEXt) { for (var keyword in metadata.tEXt) { chunks.splice(-1, 0, textEncode(keyword, metadata.tEXt[keyword])); } } if (metadata.pHYs) { const data = new Uint8Array(9); writeUInt32(data, metadata.pHYs.x, 0); writeUInt32(data, metadata.pHYs.y, 4); data[8] = metadata.pHYs.units; // inches let pHYs = chunks.find((chunk) => chunk.name === "pHYs"); if (pHYs) { pHYs.data = data; } else { chunks.splice(1, 0, { name: "pHYs", data: data }); } } } return { RESOLUTION_UNITS: RESOLUTION_UNITS, insertMetadata: insertMetadata, readMetadata: readMetadata, writeMetadata: writeMetadata, // writeMetadataB: writeMetadataB, textEncode: textEncode, textDecode: textDecode, extractChunks: extractChunks, encodeChunks: encodeChunks }; }2f:Tef2,crc32 = { /* crc32.js (C) 2014-present SheetJS -- http://sheetjs.com */ /* vim: set ts=2: */ /*exported CRC32 */ var Crc32; (function (factory) { /*jshint ignore:start */ /*eslint-disable */ factory((Crc32 = {})); /*eslint-enable */ /*jshint ignore:end */ })(function (CRC32) { CRC32.version = "1.2.0"; /* see perf/crc32table.js */ /*global Int32Array */ function signed_crc_table() { var c = 0, table = new Array(256); for (var n = 0; n != 256; ++n) { c = n; c = c & 1 ? -306674912 ^ (c >>> 1) : c >>> 1; c = c & 1 ? -306674912 ^ (c >>> 1) : c >>> 1; c = c & 1 ? -306674912 ^ (c >>> 1) : c >>> 1; c = c & 1 ? -306674912 ^ (c >>> 1) : c >>> 1; c = c & 1 ? -306674912 ^ (c >>> 1) : c >>> 1; c = c & 1 ? -306674912 ^ (c >>> 1) : c >>> 1; c = c & 1 ? -306674912 ^ (c >>> 1) : c >>> 1; c = c & 1 ? -306674912 ^ (c >>> 1) : c >>> 1; table[n] = c; } return typeof Int32Array !== "undefined" ? new Int32Array(table) : table; } var T = signed_crc_table(); function crc32_bstr(bstr, seed) { var C = seed ^ -1, L = bstr.length - 1; for (var i = 0; i < L; ) { C = (C >>> 8) ^ T[(C ^ bstr.charCodeAt(i++)) & 0xff]; C = (C >>> 8) ^ T[(C ^ bstr.charCodeAt(i++)) & 0xff]; } if (i === L) C = (C >>> 8) ^ T[(C ^ bstr.charCodeAt(i)) & 0xff]; return C ^ -1; } function crc32_buf(buf, seed) { if (buf.length > 10000) return crc32_buf_8(buf, seed); var C = seed ^ -1, L = buf.length - 3; for (var i = 0; i < L; ) { C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; } while (i < L + 3) C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; return C ^ -1; } function crc32_buf_8(buf, seed) { var C = seed ^ -1, L = buf.length - 7; for (var i = 0; i < L; ) { C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; } while (i < L + 7) C = (C >>> 8) ^ T[(C ^ buf[i++]) & 0xff]; return C ^ -1; } function crc32_str(str, seed) { var C = seed ^ -1; for (var i = 0, L = str.length, c, d; i < L; ) { c = str.charCodeAt(i++); if (c < 0x80) { C = (C >>> 8) ^ T[(C ^ c) & 0xff]; } else if (c < 0x800) { C = (C >>> 8) ^ T[(C ^ (192 | ((c >> 6) & 31))) & 0xff]; C = (C >>> 8) ^ T[(C ^ (128 | (c & 63))) & 0xff]; } else if (c >= 0xd800 && c < 0xe000) { c = (c & 1023) + 64; d = str.charCodeAt(i++) & 1023; C = (C >>> 8) ^ T[(C ^ (240 | ((c >> 8) & 7))) & 0xff]; C = (C >>> 8) ^ T[(C ^ (128 | ((c >> 2) & 63))) & 0xff]; C = (C >>> 8) ^ T[(C ^ (128 | ((d >> 6) & 15) | ((c & 3) << 4))) & 0xff]; C = (C >>> 8) ^ T[(C ^ (128 | (d & 63))) & 0xff]; } else { C = (C >>> 8) ^ T[(C ^ (224 | ((c >> 12) & 15))) & 0xff]; C = (C >>> 8) ^ T[(C ^ (128 | ((c >> 6) & 63))) & 0xff]; C = (C >>> 8) ^ T[(C ^ (128 | (c & 63))) & 0xff]; } } return C ^ -1; } CRC32.table = T; // $FlowIgnore CRC32.bstr = crc32_bstr; // $FlowIgnore CRC32.buf = crc32_buf; // $FlowIgnore CRC32.str = crc32_str; }); return Crc32; }30:T429,{ if (!Blob.prototype.arrayBuffer) { Blob.prototype.arrayBuffer = function () { return new Promise((resolve, reject) => { // Blob -> ArrayBuffer var fileReader = new FileReader(); fileReader.onload = function (event) { var arrayBuffer = event.target.result; resolve(arrayBuffer); // warn if read values are not the same as the original values // arrayEqual from: http://stackoverflow.com/questions/3115982/how-to-check-javascript-array-equals // function arrayEqual(a, b) { // return !(a < b || b < a); // } // if (arrayBufferNew.byteLength !== arrayBuffer.byteLength) // should be 3 // reject("ArrayBuffer byteLength does not match"); // if (arrayEqual(uint8ArrayNew, uint8Array) !== true) // should be [1,2,3] // reject("Uint8Array does not match"); }; fileReader.readAsArrayBuffer(this); fileReader.result; // also accessible this way once the blob has been read }); }; } }31:[] 2c:{"id":"a1a3e0f706943a7d","slug":"hello-png-metadata","title":"Hello, png-metadata","thumbnail":"167e5f1e8085146b5a01f2fc850931e375724187aa3939e6ce83af9fff0af6f5","access_level":"public","create_time":"$D2023-11-27T10:01:51.594Z","update_time":"$D2023-11-27T10:35:29.197Z","view_time":null,"first_public_time":"$D2023-11-28T08:28:29.235Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d2dc6c8d94d1ea2c","login":"chrispahm","name":"Christoph Pahmeyer","avatar_url":"https://avatars-next.observableusercontent.com/5f4a345410b8a1f574bf0beecf9c7b18c1140fb1c085b289e271718ef4ed0d57","tier":"starter_2024"},"version":101,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e3c99024cde17af0","login":"chrispahm","name":"Christoph Pahmeyer","avatar_url":"https://avatars-next.observableusercontent.com/5f4a345410b8a1f574bf0beecf9c7b18c1140fb1c085b289e271718ef4ed0d57","tier":null}],"members":[{"type":"individual","id":"e3c99024cde17af0","login":"chrispahm","name":"Christoph Pahmeyer","avatar_url":"https://avatars-next.observableusercontent.com/5f4a345410b8a1f574bf0beecf9c7b18c1140fb1c085b289e271718ef4ed0d57","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hello, png-metadata","cells":[{"id":0,"value":"# Hello, png-metadata","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"Github repository: https://github.com/hometlt/png-metadata/tree/master\n\n#### 1. Enter a URL pointing to a PNG image to get started","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"viewof url = Inputs.text({\n label: \"URL\",\n value:\n \"https://upload.wikimedia.org/wikipedia/commons/0/06/Wikipedia-logo_ka.png\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"#### 2. Download the image as an array buffer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"ab = fetch(url).then((res) => res.arrayBuffer())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"#### 3. Convert the array buffer to a Node.js buffer\nThis is necessary since the png-metadata library only accepts Node-style buffers. Check out [this article](https://codeforgeek.com/nodejs-buffer-vs-javascript-arraybuffer/) to get more information about the difference between array buffers and Node-style buffers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"nb = Buffer.from(ab)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"#### 4. Read PNG Metadata","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"png_metadata.readMetadata(nb)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"## Technical Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"### PNG-Metadata Library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Buffer = (await import(\"https://cdn.skypack.dev/buffer@6.0.3?min\")).Buffer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"