UNPKG

tldraw

Version:

A tiny little drawing editor.

tldraw.dev

tldraw/tldraw

8 lines (7 loc) • 3.89 kB
1
2
3
4
5
6
7
8
{ "version": 3, "sources": ["../../../../src/lib/utils/assets/assets.ts"], "sourcesContent": ["import { MediaHelpers, assertExists } from '@tldraw/editor'\nimport { clampToBrowserMaxCanvasSize } from '../../shapes/shared/getBrowserCanvasMaxSize'\n\n/** @public */\nexport interface BoxWidthHeight {\n\tw: number\n\th: number\n}\n\n/**\n * Contains the size within the given box size\n *\n * @param originalSize - The size of the asset\n * @param containBoxSize - The container size\n * @returns Adjusted size\n * @public\n */\nexport function containBoxSize(\n\toriginalSize: BoxWidthHeight,\n\tcontainBoxSize: BoxWidthHeight\n): BoxWidthHeight {\n\tconst overByXScale = originalSize.w / containBoxSize.w\n\tconst overByYScale = originalSize.h / containBoxSize.h\n\n\tif (overByXScale <= 1 && overByYScale <= 1) {\n\t\treturn originalSize\n\t} else if (overByXScale > overByYScale) {\n\t\treturn {\n\t\t\tw: originalSize.w / overByXScale,\n\t\t\th: originalSize.h / overByXScale,\n\t\t}\n\t} else {\n\t\treturn {\n\t\t\tw: originalSize.w / overByYScale,\n\t\t\th: originalSize.h / overByYScale,\n\t\t}\n\t}\n}\n\n/**\n * Resize an image Blob to be smaller than it is currently.\n *\n * @example\n * ```ts\n * const image = await (await fetch('/image.jpg')).blob()\n * const size = await getImageSize(image)\n * const resizedImage = await downsizeImage(image, size.w / 2, size.h / 2, { type: \"image/jpeg\", quality: 0.85 })\n * ```\n *\n * @param image - The image Blob.\n * @param width - The desired width.\n * @param height - The desired height.\n * @param opts - Options for the image.\n * @public\n */\nexport async function downsizeImage(\n\tblob: Blob,\n\twidth: number,\n\theight: number,\n\topts = {} as { type?: string; quality?: number }\n): Promise<Blob> {\n\tconst image = await MediaHelpers.usingObjectURL(blob, MediaHelpers.loadImage)\n\tconst { type = blob.type, quality = 0.85 } = opts\n\tconst [desiredWidth, desiredHeight] = await clampToBrowserMaxCanvasSize(\n\t\tMath.min(width * 2, image.naturalWidth),\n\t\tMath.min(height * 2, image.naturalHeight)\n\t)\n\n\tconst canvas = document.createElement('canvas')\n\tcanvas.width = desiredWidth\n\tcanvas.height = desiredHeight\n\tconst ctx = assertExists(\n\t\tcanvas.getContext('2d', { willReadFrequently: true }),\n\t\t'Could not get canvas context'\n\t)\n\tctx.imageSmoothingEnabled = true\n\tctx.imageSmoothingQuality = 'high'\n\tctx.drawImage(image, 0, 0, desiredWidth, desiredHeight)\n\n\treturn new Promise((resolve, reject) => {\n\t\tcanvas.toBlob(\n\t\t\t(blob) => {\n\t\t\t\tif (blob) {\n\t\t\t\t\tresolve(blob)\n\t\t\t\t} else {\n\t\t\t\t\treject(new Error('Could not resize image'))\n\t\t\t\t}\n\t\t\t},\n\t\t\ttype,\n\t\t\tquality\n\t\t)\n\t})\n}\n"], "mappings": "AAAA,SAAS,cAAc,oBAAoB;AAC3C,SAAS,mCAAmC;AAgBrC,SAAS,eACf,cACAA,iBACiB;AACjB,QAAM,eAAe,aAAa,IAAIA,gBAAe;AACrD,QAAM,eAAe,aAAa,IAAIA,gBAAe;AAErD,MAAI,gBAAgB,KAAK,gBAAgB,GAAG;AAC3C,WAAO;AAAA,EACR,WAAW,eAAe,cAAc;AACvC,WAAO;AAAA,MACN,GAAG,aAAa,IAAI;AAAA,MACpB,GAAG,aAAa,IAAI;AAAA,IACrB;AAAA,EACD,OAAO;AACN,WAAO;AAAA,MACN,GAAG,aAAa,IAAI;AAAA,MACpB,GAAG,aAAa,IAAI;AAAA,IACrB;AAAA,EACD;AACD;AAkBA,eAAsB,cACrB,MACA,OACA,QACA,OAAO,CAAC,GACQ;AAChB,QAAM,QAAQ,MAAM,aAAa,eAAe,MAAM,aAAa,SAAS;AAC5E,QAAM,EAAE,OAAO,KAAK,MAAM,UAAU,KAAK,IAAI;AAC7C,QAAM,CAAC,cAAc,aAAa,IAAI,MAAM;AAAA,IAC3C,KAAK,IAAI,QAAQ,GAAG,MAAM,YAAY;AAAA,IACtC,KAAK,IAAI,SAAS,GAAG,MAAM,aAAa;AAAA,EACzC;AAEA,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,QAAQ;AACf,SAAO,SAAS;AAChB,QAAM,MAAM;AAAA,IACX,OAAO,WAAW,MAAM,EAAE,oBAAoB,KAAK,CAAC;AAAA,IACpD;AAAA,EACD;AACA,MAAI,wBAAwB;AAC5B,MAAI,wBAAwB;AAC5B,MAAI,UAAU,OAAO,GAAG,GAAG,cAAc,aAAa;AAEtD,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACvC,WAAO;AAAA,MACN,CAACC,UAAS;AACT,YAAIA,OAAM;AACT,kBAAQA,KAAI;AAAA,QACb,OAAO;AACN,iBAAO,IAAI,MAAM,wBAAwB,CAAC;AAAA,QAC3C;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,CAAC;AACF;", "names": ["containBoxSize", "blob"] }