yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add maxWidth to imageSize function

Browse Source
This commit is contained in:
Jacob Overgaard
2024-09-25 14:40:58 +02:00
parent c0dcce7a0f
commit 7ac4d154b4
2 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/Umbraco.Web.UI.Client/src/packages/core/utils/media/image-size.function.ts
View File

@@ -1,25 +1,40 @@
/**
* Get the dimensions of an image from a URL.
* @param {string} url The URL of the image. It can be a local file (blob url) or a remote file.
* @returns {Promise<{width: number, height: number}>} The width and height of the image as downloaded from the URL.
* @param {{maxWidth?: number}} opts Options for the image size.
* @param {number} opts.maxWidth The maximum width of the image. If the image is wider than this, it will be scaled down to this width while keeping the aspect ratio.
* @returns {Promise<{width: number, height: number, naturalWidth: number, naturalHeight: number}>} The width and height of the image as downloaded from the URL. The width and height can differ from the natural numbers if maxImageWidth is given.
*/
export function imageSize(url: string): Promise<{ width: number; height: number }> {
export function imageSize(
url: string,
opts?: { maxWidth?: number },
): Promise<{ width: number; height: number; naturalWidth: number; naturalHeight: number }> {
const img = new Image();
const promise = new Promise<{ width: number; height: number }>((resolve, reject) => {
img.onload = () => {
// Natural size is the actual image size regardless of rendering.
// The 'normal' `width`/`height` are for the **rendered** size.
const width = img.naturalWidth;
const height = img.naturalHeight;
const promise = new Promise<{ width: number; height: number; naturalWidth: number; naturalHeight: number }>(
(resolve, reject) => {
img.onload = () => {
// Natural size is the actual image size regardless of rendering.
// The 'normal' `width`/`height` are for the **rendered** size.
const naturalWidth = img.naturalWidth;
const naturalHeight = img.naturalHeight;
let width = naturalWidth;
let height = naturalHeight;
// Resolve promise with the width and height
resolve({ width, height });
};
if (opts?.maxWidth && opts.maxWidth > 0 && width > opts?.maxWidth) {
const ratio = opts.maxWidth / naturalWidth;
width = opts.maxWidth;
height = Math.round(naturalHeight * ratio);
}
// Reject promise on error
img.onerror = reject;
});
// Resolve promise with the width and height
resolve({ width, height, naturalWidth, naturalHeight });
};
// Reject promise on error
img.onerror = reject;
},
);
// Setting the source makes it start downloading and eventually call `onload`
img.src = url;

8
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/umb/media-upload.extension.ts
View File

@@ -99,13 +99,7 @@ export default class UmbTiptapMediaUploadExtension extends UmbTiptapExtensionApi
return;
}
let { width, height } = await imageSize(URL.createObjectURL(upload.file));
if (maxImageSize > 0 && width > maxImageSize) {
const ratio = maxImageSize / width;
width = maxImageSize;
height = Math.round(height * ratio);
}
const { width, height } = await imageSize(URL.createObjectURL(upload.file), { maxWidth: maxImageSize });
editor
.chain()