@metamask/snaps-sdk
Version:
A library containing the core functionality for building MetaMask Snaps
91 lines • 3.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getImageComponent = exports.getImageData = void 0;
const utils_1 = require("@metamask/utils");
const ui_1 = require("./ui/index.cjs");
/**
* Get raw image data from a URL.
*
* @param url - The URL to get the image data from.
* @param options - The options to use when fetching the image data. This is
* passed directly to `fetch`.
* @returns A promise that resolves to the image data as a blob.
*/
async function getRawImageData(url, options) {
if (typeof fetch !== 'function') {
throw new Error(`Failed to fetch image data from "${url}": Using this function requires the "endowment:network-access" permission.`);
}
return fetch(url, options).then(async (response) => {
if (!response.ok) {
throw new Error(`Failed to fetch image data from "${url}": ${response.status} ${response.statusText}`);
}
const blob = await response.blob();
(0, utils_1.assert)(blob.type === 'image/jpeg' || blob.type === 'image/png', 'Expected image data to be a JPEG or PNG image.');
return blob;
});
}
/**
* Get image data as data-string from a URL. This is useful for embedding images
* inside of SVGs. Only JPEG and PNG images are supported.
*
* Note: This function uses `fetch` to get the image data. This means that using
* it requires the `endowment:network-access` permission.
*
* @example
* const imageData = await getImageData('https://cataas.com/cat');
* const svg = `
* <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
* <image href="${imageData}" />
* </svg>
* `;
*
* // Render the SVG in a Snap UI.
* const ui = image(svg);
* @param url - The URL to get the image data from.
* @param options - The options to use when fetching the image data. This is
* passed directly to `fetch`.
* @returns A promise that resolves to the image data as a data-string.
*/
async function getImageData(url, options) {
const blob = await getRawImageData(url, options);
const bytes = new Uint8Array(await blob.arrayBuffer());
return `data:${blob.type};base64,${(0, utils_1.bytesToBase64)(bytes)}`;
}
exports.getImageData = getImageData;
/**
* Get an image component from a URL. This is useful for embedding images inside
* Snap UIs. Only JPEG and PNG images are supported.
*
* Note: This function uses `fetch` to get the image data. This means that using
* it requires the `endowment:network-access` permission.
*
* @example
* const component = await getImage('https://cataas.com/cat');
*
* return await snap.request({
* method: 'snap_dialog',
* params: {
* type: 'alert',
* content: panel([
* component,
* ]),
* },
* });
* @param url - The URL to get the image data from.
* @param options - The options to use when fetching and rendering the image.
* @param options.width - The width of the image.
* @param options.height - The height of the image. If this is not provided, the
* width will be used as the height.
* @param options.request - The options to use when fetching the image data.
* This is passed directly to `fetch`.
* @returns A promise that resolves to the image data as an image component.
*/
async function getImageComponent(url, { width, height = width, request }) {
(0, utils_1.assert)(typeof width === 'number' && width > 0, 'Expected width to be a number greater than 0.');
(0, utils_1.assert)(typeof height === 'number' && height > 0, 'Expected height to be a number greater than 0.');
const imageData = await getImageData(url, request);
const size = `width="${width}" height="${height}"`;
return (0, ui_1.image)(`<svg ${size.trim()} xmlns="http://www.w3.org/2000/svg"><image ${size.trim()} href="${imageData}" /></svg>`);
}
exports.getImageComponent = getImageComponent;
//# sourceMappingURL=images.cjs.map