matrix-react-sdk
Version:
SDK for matrix.org using React
92 lines (87 loc) • 12.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BLURHASH_FIELD = void 0;
exports.createThumbnail = createThumbnail;
var _BlurhashEncoder = require("../BlurhashEncoder");
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
const BLURHASH_FIELD = exports.BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
const MAX_WIDTH = 800;
const MAX_HEIGHT = 600;
/**
* Create a thumbnail for a image DOM element.
* The image will be smaller than MAX_WIDTH and MAX_HEIGHT.
* The thumbnail will have the same aspect ratio as the original.
* Draws the element into a canvas using CanvasRenderingContext2D.drawImage
* Then calls Canvas.toBlob to get a blob object for the image data.
*
* Since it needs to calculate the dimensions of the source image and the
* thumbnailed image it returns an info object filled out with information
* about the original image and the thumbnail.
*
* @param {HTMLElement} element The element to thumbnail.
* @param {number} inputWidth The width of the image in the input element.
* @param {number} inputHeight the width of the image in the input element.
* @param {string} mimeType The mimeType to save the blob as.
* @param {boolean} calculateBlurhash Whether to calculate a blurhash of the given image too.
* @return {Promise} A promise that resolves with an object with an info key
* and a thumbnail key.
*/
async function createThumbnail(element, inputWidth, inputHeight, mimeType, calculateBlurhash = true) {
let targetWidth = inputWidth;
let targetHeight = inputHeight;
if (targetHeight > MAX_HEIGHT) {
targetWidth = Math.floor(targetWidth * (MAX_HEIGHT / targetHeight));
targetHeight = MAX_HEIGHT;
}
if (targetWidth > MAX_WIDTH) {
targetHeight = Math.floor(targetHeight * (MAX_WIDTH / targetWidth));
targetWidth = MAX_WIDTH;
}
let canvas;
let context;
try {
canvas = new window.OffscreenCanvas(targetWidth, targetHeight);
context = canvas.getContext("2d");
} catch (e) {
// Fallback support for other browsers (Safari and Firefox for now)
canvas = document.createElement("canvas");
canvas.width = targetWidth;
canvas.height = targetHeight;
context = canvas.getContext("2d");
}
context.drawImage(element, 0, 0, targetWidth, targetHeight);
let thumbnailPromise;
if (window.OffscreenCanvas && canvas instanceof OffscreenCanvas) {
thumbnailPromise = canvas.convertToBlob({
type: mimeType
});
} else {
thumbnailPromise = new Promise(resolve => canvas.toBlob(resolve, mimeType));
}
const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
// thumbnailPromise and blurhash promise are being awaited concurrently
const blurhash = calculateBlurhash ? await _BlurhashEncoder.BlurhashEncoder.instance.getBlurhash(imageData) : undefined;
const thumbnail = await thumbnailPromise;
return {
info: {
thumbnail_info: {
w: targetWidth,
h: targetHeight,
mimetype: thumbnail.type,
size: thumbnail.size
},
w: inputWidth,
h: inputHeight,
[BLURHASH_FIELD]: blurhash
},
thumbnail
};
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfQmx1cmhhc2hFbmNvZGVyIiwicmVxdWlyZSIsIkJMVVJIQVNIX0ZJRUxEIiwiZXhwb3J0cyIsIk1BWF9XSURUSCIsIk1BWF9IRUlHSFQiLCJjcmVhdGVUaHVtYm5haWwiLCJlbGVtZW50IiwiaW5wdXRXaWR0aCIsImlucHV0SGVpZ2h0IiwibWltZVR5cGUiLCJjYWxjdWxhdGVCbHVyaGFzaCIsInRhcmdldFdpZHRoIiwidGFyZ2V0SGVpZ2h0IiwiTWF0aCIsImZsb29yIiwiY2FudmFzIiwiY29udGV4dCIsIndpbmRvdyIsIk9mZnNjcmVlbkNhbnZhcyIsImdldENvbnRleHQiLCJlIiwiZG9jdW1lbnQiLCJjcmVhdGVFbGVtZW50Iiwid2lkdGgiLCJoZWlnaHQiLCJkcmF3SW1hZ2UiLCJ0aHVtYm5haWxQcm9taXNlIiwiY29udmVydFRvQmxvYiIsInR5cGUiLCJQcm9taXNlIiwicmVzb2x2ZSIsInRvQmxvYiIsImltYWdlRGF0YSIsImdldEltYWdlRGF0YSIsImJsdXJoYXNoIiwiQmx1cmhhc2hFbmNvZGVyIiwiaW5zdGFuY2UiLCJnZXRCbHVyaGFzaCIsInVuZGVmaW5lZCIsInRodW1ibmFpbCIsImluZm8iLCJ0aHVtYm5haWxfaW5mbyIsInciLCJoIiwibWltZXR5cGUiLCJzaXplIl0sInNvdXJjZXMiOlsiLi4vLi4vc3JjL3V0aWxzL2ltYWdlLW1lZGlhLnRzIl0sInNvdXJjZXNDb250ZW50IjpbIi8qXG5Db3B5cmlnaHQgMjAyNCBOZXcgVmVjdG9yIEx0ZC5cbkNvcHlyaWdodCAyMDIyIFRoZSBNYXRyaXgub3JnIEZvdW5kYXRpb24gQy5JLkMuXG5cblNQRFgtTGljZW5zZS1JZGVudGlmaWVyOiBBR1BMLTMuMC1vbmx5IE9SIEdQTC0zLjAtb25seVxuUGxlYXNlIHNlZSBMSUNFTlNFIGZpbGVzIGluIHRoZSByZXBvc2l0b3J5IHJvb3QgZm9yIGZ1bGwgZGV0YWlscy5cbiovXG5cbmltcG9ydCB7IEVuY3J5cHRlZEZpbGUgfSBmcm9tIFwibWF0cml4LWpzLXNkay9zcmMvdHlwZXNcIjtcblxuaW1wb3J0IHsgQmx1cmhhc2hFbmNvZGVyIH0gZnJvbSBcIi4uL0JsdXJoYXNoRW5jb2RlclwiO1xuXG50eXBlIFRodW1ibmFpbGFibGVFbGVtZW50ID0gSFRNTEltYWdlRWxlbWVudCB8IEhUTUxWaWRlb0VsZW1lbnQ7XG5cbmV4cG9ydCBjb25zdCBCTFVSSEFTSF9GSUVMRCA9IFwieHl6LmFtb3JnYW4uYmx1cmhhc2hcIjsgLy8gTVNDMjQ0OFxuXG5pbnRlcmZhY2UgSVRodW1ibmFpbCB7XG4gICAgaW5mbzoge1xuICAgICAgICB0aHVtYm5haWxfaW5mbz86IHtcbiAgICAgICAgICAgIHc6IG51bWJlcjtcbiAgICAgICAgICAgIGg6IG51bWJlcjtcbiAgICAgICAgICAgIG1pbWV0eXBlOiBzdHJpbmc7XG4gICAgICAgICAgICBzaXplOiBudW1iZXI7XG4gICAgICAgIH07XG4gICAgICAgIHc6IG51bWJlcjtcbiAgICAgICAgaDogbnVtYmVyO1xuICAgICAgICBbQkxVUkhBU0hfRklFTERdPzogc3RyaW5nO1xuICAgICAgICB0aHVtYm5haWxfdXJsPzogc3RyaW5nO1xuICAgICAgICB0aHVtYm5haWxfZmlsZT86IEVuY3J5cHRlZEZpbGU7XG4gICAgfTtcbiAgICB0aHVtYm5haWw6IEJsb2I7XG59XG5cbmNvbnN0IE1BWF9XSURUSCA9IDgwMDtcbmNvbnN0IE1BWF9IRUlHSFQgPSA2MDA7XG5cbi8qKlxuICogQ3JlYXRlIGEgdGh1bWJuYWlsIGZvciBhIGltYWdlIERPTSBlbGVtZW50LlxuICogVGhlIGltYWdlIHdpbGwgYmUgc21hbGxlciB0aGFuIE1BWF9XSURUSCBhbmQgTUFYX0hFSUdIVC5cbiAqIFRoZSB0aHVtYm5haWwgd2lsbCBoYXZlIHRoZSBzYW1lIGFzcGVjdCByYXRpbyBhcyB0aGUgb3JpZ2luYWwuXG4gKiBEcmF3cyB0aGUgZWxlbWVudCBpbnRvIGEgY2FudmFzIHVzaW5nIENhbnZhc1JlbmRlcmluZ0NvbnRleHQyRC5kcmF3SW1hZ2VcbiAqIFRoZW4gY2FsbHMgQ2FudmFzLnRvQmxvYiB0byBnZXQgYSBibG9iIG9iamVjdCBmb3IgdGhlIGltYWdlIGRhdGEuXG4gKlxuICogU2luY2UgaXQgbmVlZHMgdG8gY2FsY3VsYXRlIHRoZSBkaW1lbnNpb25zIG9mIHRoZSBzb3VyY2UgaW1hZ2UgYW5kIHRoZVxuICogdGh1bWJuYWlsZWQgaW1hZ2UgaXQgcmV0dXJucyBhbiBpbmZvIG9iamVjdCBmaWxsZWQgb3V0IHdpdGggaW5mb3JtYXRpb25cbiAqIGFib3V0IHRoZSBvcmlnaW5hbCBpbWFnZSBhbmQgdGhlIHRodW1ibmFpbC5cbiAqXG4gKiBAcGFyYW0ge0hUTUxFbGVtZW50fSBlbGVtZW50IFRoZSBlbGVtZW50IHRvIHRodW1ibmFpbC5cbiAqIEBwYXJhbSB7bnVtYmVyfSBpbnB1dFdpZHRoIFRoZSB3aWR0aCBvZiB0aGUgaW1hZ2UgaW4gdGhlIGlucHV0IGVsZW1lbnQuXG4gKiBAcGFyYW0ge251bWJlcn0gaW5wdXRIZWlnaHQgdGhlIHdpZHRoIG9mIHRoZSBpbWFnZSBpbiB0aGUgaW5wdXQgZWxlbWVudC5cbiAqIEBwYXJhbSB7c3RyaW5nfSBtaW1lVHlwZSBUaGUgbWltZVR5cGUgdG8gc2F2ZSB0aGUgYmxvYiBhcy5cbiAqIEBwYXJhbSB7Ym9vbGVhbn0gY2FsY3VsYXRlQmx1cmhhc2ggV2hldGhlciB0byBjYWxjdWxhdGUgYSBibHVyaGFzaCBvZiB0aGUgZ2l2ZW4gaW1hZ2UgdG9vLlxuICogQHJldHVybiB7UHJvbWlzZX0gQSBwcm9taXNlIHRoYXQgcmVzb2x2ZXMgd2l0aCBhbiBvYmplY3Qgd2l0aCBhbiBpbmZvIGtleVxuICogIGFuZCBhIHRodW1ibmFpbCBrZXkuXG4gKi9cbmV4cG9ydCBhc3luYyBmdW5jdGlvbiBjcmVhdGVUaHVtYm5haWwoXG4gICAgZWxlbWVudDogVGh1bWJuYWlsYWJsZUVsZW1lbnQsXG4gICAgaW5wdXRXaWR0aDogbnVtYmVyLFxuICAgIGlucHV0SGVpZ2h0OiBudW1iZXIsXG4gICAgbWltZVR5cGU6IHN0cmluZyxcbiAgICBjYWxjdWxhdGVCbHVyaGFzaCA9IHRydWUsXG4pOiBQcm9taXNlPElUaHVtYm5haWw+IHtcbiAgICBsZXQgdGFyZ2V0V2lkdGggPSBpbnB1dFdpZHRoO1xuICAgIGxldCB0YXJnZXRIZWlnaHQgPSBpbnB1dEhlaWdodDtcbiAgICBpZiAodGFyZ2V0SGVpZ2h0ID4gTUFYX0hFSUdIVCkge1xuICAgICAgICB0YXJnZXRXaWR0aCA9IE1hdGguZmxvb3IodGFyZ2V0V2lkdGggKiAoTUFYX0hFSUdIVCAvIHRhcmdldEhlaWdodCkpO1xuICAgICAgICB0YXJnZXRIZWlnaHQgPSBNQVhfSEVJR0hUO1xuICAgIH1cbiAgICBpZiAodGFyZ2V0V2lkdGggPiBNQVhfV0lEVEgpIHtcbiAgICAgICAgdGFyZ2V0SGVpZ2h0ID0gTWF0aC5mbG9vcih0YXJnZXRIZWlnaHQgKiAoTUFYX1dJRFRIIC8gdGFyZ2V0V2lkdGgpKTtcbiAgICAgICAgdGFyZ2V0V2lkdGggPSBNQVhfV0lEVEg7XG4gICAgfVxuXG4gICAgbGV0IGNhbnZhczogSFRNTENhbnZhc0VsZW1lbnQgfCBPZmZzY3JlZW5DYW52YXM7XG4gICAgbGV0IGNvbnRleHQ6IENhbnZhc1JlbmRlcmluZ0NvbnRleHQyRCB8IE9mZnNjcmVlbkNhbnZhc1JlbmRlcmluZ0NvbnRleHQyRDtcbiAgICB0cnkge1xuICAgICAgICBjYW52YXMgPSBuZXcgd2luZG93Lk9mZnNjcmVlbkNhbnZhcyh0YXJnZXRXaWR0aCwgdGFyZ2V0SGVpZ2h0KTtcbiAgICAgICAgY29udGV4dCA9IGNhbnZhcy5nZXRDb250ZXh0KFwiMmRcIikgYXMgT2Zmc2NyZWVuQ2FudmFzUmVuZGVyaW5nQ29udGV4dDJEO1xuICAgIH0gY2F0Y2ggKGUpIHtcbiAgICAgICAgLy8gRmFsbGJhY2sgc3VwcG9ydCBmb3Igb3RoZXIgYnJvd3NlcnMgKFNhZmFyaSBhbmQgRmlyZWZveCBmb3Igbm93KVxuICAgICAgICBjYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KFwiY2FudmFzXCIpO1xuICAgICAgICBjYW52YXMud2lkdGggPSB0YXJnZXRXaWR0aDtcbiAgICAgICAgY2FudmFzLmhlaWdodCA9IHRhcmdldEhlaWdodDtcbiAgICAgICAgY29udGV4dCA9IGNhbnZhcy5nZXRDb250ZXh0KFwiMmRcIikhO1xuICAgIH1cblxuICAgIGNvbnRleHQuZHJhd0ltYWdlKGVsZW1lbnQsIDAsIDAsIHRhcmdldFdpZHRoLCB0YXJnZXRIZWlnaHQpO1xuXG4gICAgbGV0IHRodW1ibmFpbFByb21pc2U6IFByb21pc2U8QmxvYj47XG4gICAgaWYgKHdpbmRvdy5PZmZzY3JlZW5DYW52YXMgJiYgY2FudmFzIGluc3RhbmNlb2YgT2Zmc2NyZWVuQ2FudmFzKSB7XG4gICAgICAgIHRodW1ibmFpbFByb21pc2UgPSBjYW52YXMuY29udmVydFRvQmxvYih7IHR5cGU6IG1pbWVUeXBlIH0pO1xuICAgIH0gZWxzZSB7XG4gICAgICAgIHRodW1ibmFpbFByb21pc2UgPSBuZXcgUHJvbWlzZTxCbG9iPigocmVzb2x2ZSkgPT5cbiAgICAgICAgICAgIChjYW52YXMgYXMgSFRNTENhbnZhc0VsZW1lbnQpLnRvQmxvYihyZXNvbHZlIGFzIEJsb2JDYWxsYmFjaywgbWltZVR5cGUpLFxuICAgICAgICApO1xuICAgIH1cblxuICAgIGNvbnN0IGltYWdlRGF0YSA9IGNvbnRleHQuZ2V0SW1hZ2VEYXRhKDAsIDAsIHRhcmdldFdpZHRoLCB0YXJnZXRIZWlnaHQpO1xuICAgIC8vIHRodW1ibmFpbFByb21pc2UgYW5kIGJsdXJoYXNoIHByb21pc2UgYXJlIGJlaW5nIGF3YWl0ZWQgY29uY3VycmVudGx5XG4gICAgY29uc3QgYmx1cmhhc2ggPSBjYWxjdWxhdGVCbHVyaGFzaCA/IGF3YWl0IEJsdXJoYXNoRW5jb2Rlci5pbnN0YW5jZS5nZXRCbHVyaGFzaChpbWFnZURhdGEpIDogdW5kZWZpbmVkO1xuICAgIGNvbnN0IHRodW1ibmFpbCA9IGF3YWl0IHRodW1ibmFpbFByb21pc2U7XG5cbiAgICByZXR1cm4ge1xuICAgICAgICBpbmZvOiB7XG4gICAgICAgICAgICB0aHVtYm5haWxfaW5mbzoge1xuICAgICAgICAgICAgICAgIHc6IHRhcmdldFdpZHRoLFxuICAgICAgICAgICAgICAgIGg6IHRhcmdldEhlaWdodCxcbiAgICAgICAgICAgICAgICBtaW1ldHlwZTogdGh1bWJuYWlsLnR5cGUsXG4gICAgICAgICAgICAgICAgc2l6ZTogdGh1bWJuYWlsLnNpemUsXG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgdzogaW5wdXRXaWR0aCxcbiAgICAgICAgICAgIGg6IGlucHV0SGVpZ2h0LFxuICAgICAgICAgICAgW0JMVVJIQVNIX0ZJRUxEXTogYmx1cmhhc2gsXG4gICAgICAgIH0sXG4gICAgICAgIHRodW1ibmFpbCxcbiAgICB9O1xufVxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBVUEsSUFBQUEsZ0JBQUEsR0FBQUMsT0FBQTtBQVZBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQVFPLE1BQU1DLGNBQWMsR0FBQUMsT0FBQSxDQUFBRCxjQUFBLEdBQUcsc0JBQXNCLENBQUMsQ0FBQzs7QUFtQnRELE1BQU1FLFNBQVMsR0FBRyxHQUFHO0FBQ3JCLE1BQU1DLFVBQVUsR0FBRyxHQUFHOztBQUV0QjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNPLGVBQWVDLGVBQWVBLENBQ2pDQyxPQUE2QixFQUM3QkMsVUFBa0IsRUFDbEJDLFdBQW1CLEVBQ25CQyxRQUFnQixFQUNoQkMsaUJBQWlCLEdBQUcsSUFBSSxFQUNMO0VBQ25CLElBQUlDLFdBQVcsR0FBR0osVUFBVTtFQUM1QixJQUFJSyxZQUFZLEdBQUdKLFdBQVc7RUFDOUIsSUFBSUksWUFBWSxHQUFHUixVQUFVLEVBQUU7SUFDM0JPLFdBQVcsR0FBR0UsSUFBSSxDQUFDQyxLQUFLLENBQUNILFdBQVcsSUFBSVAsVUFBVSxHQUFHUSxZQUFZLENBQUMsQ0FBQztJQUNuRUEsWUFBWSxHQUFHUixVQUFVO0VBQzdCO0VBQ0EsSUFBSU8sV0FBVyxHQUFHUixTQUFTLEVBQUU7SUFDekJTLFlBQVksR0FBR0MsSUFBSSxDQUFDQyxLQUFLLENBQUNGLFlBQVksSUFBSVQsU0FBUyxHQUFHUSxXQUFXLENBQUMsQ0FBQztJQUNuRUEsV0FBVyxHQUFHUixTQUFTO0VBQzNCO0VBRUEsSUFBSVksTUFBMkM7RUFDL0MsSUFBSUMsT0FBcUU7RUFDekUsSUFBSTtJQUNBRCxNQUFNLEdBQUcsSUFBSUUsTUFBTSxDQUFDQyxlQUFlLENBQUNQLFdBQVcsRUFBRUMsWUFBWSxDQUFDO0lBQzlESSxPQUFPLEdBQUdELE1BQU0sQ0FBQ0ksVUFBVSxDQUFDLElBQUksQ0FBc0M7RUFDMUUsQ0FBQyxDQUFDLE9BQU9DLENBQUMsRUFBRTtJQUNSO0lBQ0FMLE1BQU0sR0FBR00sUUFBUSxDQUFDQyxhQUFhLENBQUMsUUFBUSxDQUFDO0lBQ3pDUCxNQUFNLENBQUNRLEtBQUssR0FBR1osV0FBVztJQUMxQkksTUFBTSxDQUFDUyxNQUFNLEdBQUdaLFlBQVk7SUFDNUJJLE9BQU8sR0FBR0QsTUFBTSxDQUFDSSxVQUFVLENBQUMsSUFBSSxDQUFFO0VBQ3RDO0VBRUFILE9BQU8sQ0FBQ1MsU0FBUyxDQUFDbkIsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUVLLFdBQVcsRUFBRUMsWUFBWSxDQUFDO0VBRTNELElBQUljLGdCQUErQjtFQUNuQyxJQUFJVCxNQUFNLENBQUNDLGVBQWUsSUFBSUgsTUFBTSxZQUFZRyxlQUFlLEVBQUU7SUFDN0RRLGdCQUFnQixHQUFHWCxNQUFNLENBQUNZLGFBQWEsQ0FBQztNQUFFQyxJQUFJLEVBQUVuQjtJQUFTLENBQUMsQ0FBQztFQUMvRCxDQUFDLE1BQU07SUFDSGlCLGdCQUFnQixHQUFHLElBQUlHLE9BQU8sQ0FBUUMsT0FBTyxJQUN4Q2YsTUFBTSxDQUF1QmdCLE1BQU0sQ0FBQ0QsT0FBTyxFQUFrQnJCLFFBQVEsQ0FDMUUsQ0FBQztFQUNMO0VBRUEsTUFBTXVCLFNBQVMsR0FBR2hCLE9BQU8sQ0FBQ2lCLFlBQVksQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFdEIsV0FBVyxFQUFFQyxZQUFZLENBQUM7RUFDdkU7RUFDQSxNQUFNc0IsUUFBUSxHQUFHeEIsaUJBQWlCLEdBQUcsTUFBTXlCLGdDQUFlLENBQUNDLFFBQVEsQ0FBQ0MsV0FBVyxDQUFDTCxTQUFTLENBQUMsR0FBR00sU0FBUztFQUN0RyxNQUFNQyxTQUFTLEdBQUcsTUFBTWIsZ0JBQWdCO0VBRXhDLE9BQU87SUFDSGMsSUFBSSxFQUFFO01BQ0ZDLGNBQWMsRUFBRTtRQUNaQyxDQUFDLEVBQUUvQixXQUFXO1FBQ2RnQyxDQUFDLEVBQUUvQixZQUFZO1FBQ2ZnQyxRQUFRLEVBQUVMLFNBQVMsQ0FBQ1gsSUFBSTtRQUN4QmlCLElBQUksRUFBRU4sU0FBUyxDQUFDTTtNQUNwQixDQUFDO01BQ0RILENBQUMsRUFBRW5DLFVBQVU7TUFDYm9DLENBQUMsRUFBRW5DLFdBQVc7TUFDZCxDQUFDUCxjQUFjLEdBQUdpQztJQUN0QixDQUFDO0lBQ0RLO0VBQ0osQ0FBQztBQUNMIiwiaWdub3JlTGlzdCI6W119