Fix adding sticker in media editor
Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
This commit is contained in:
parent
106158feec
commit
1fafd912eb
3 changed files with 28 additions and 10 deletions
|
@ -56,6 +56,7 @@ import { Theme } from '../util/theme';
|
|||
import { ThemeType } from '../types/Util';
|
||||
import { arrow } from '../util/keyboard';
|
||||
import { canvasToBytes } from '../util/canvasToBytes';
|
||||
import { loadImage } from '../util/loadImage';
|
||||
import { getConversationSelector } from '../state/selectors/conversations';
|
||||
import { hydrateRanges } from '../types/BodyRange';
|
||||
import { useConfirmDiscard } from '../hooks/useConfirmDiscard';
|
||||
|
@ -1213,17 +1214,19 @@ export function MediaEditor({
|
|||
i18n={i18n}
|
||||
installedPacks={installedPacks}
|
||||
knownPacks={[]}
|
||||
onPickSticker={(_packId, _stickerId, src: string) => {
|
||||
onPickSticker={async (_packId, _stickerId, src: string) => {
|
||||
if (!fabricCanvas) {
|
||||
return;
|
||||
}
|
||||
|
||||
const img = await loadImage(src);
|
||||
|
||||
const STICKER_SIZE_RELATIVE_TO_CANVAS = 4;
|
||||
const size =
|
||||
Math.min(imageState.width, imageState.height) /
|
||||
STICKER_SIZE_RELATIVE_TO_CANVAS;
|
||||
|
||||
const sticker = new MediaEditorFabricSticker(src);
|
||||
const sticker = new MediaEditorFabricSticker(img);
|
||||
sticker.scaleToHeight(size);
|
||||
sticker.setPositionByOrigin(
|
||||
new fabric.Point(
|
||||
|
|
|
@ -17,6 +17,7 @@ import { IMAGE_PNG } from '../types/MIME';
|
|||
import { strictAssert } from '../util/assert';
|
||||
import { drop } from '../util/drop';
|
||||
import { splitText } from '../util/splitText';
|
||||
import { loadImage } from '../util/loadImage';
|
||||
import { Button, ButtonVariant } from './Button';
|
||||
import { Modal } from './Modal';
|
||||
import { ConfirmationDialog } from './ConfirmationDialog';
|
||||
|
@ -373,14 +374,7 @@ export async function _generateImageBlob({
|
|||
);
|
||||
const svgURL = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
|
||||
|
||||
const img = new Image();
|
||||
await new Promise((resolve, reject) => {
|
||||
img.addEventListener('load', resolve);
|
||||
img.addEventListener('error', () =>
|
||||
reject(new Error('Failed to load image'))
|
||||
);
|
||||
img.src = svgURL;
|
||||
});
|
||||
const img = await loadImage(svgURL);
|
||||
|
||||
context.drawImage(img, 0, 0, PRINT_WIDTH, PRINT_HEIGHT);
|
||||
|
||||
|
|
21
ts/util/loadImage.ts
Normal file
21
ts/util/loadImage.ts
Normal file
|
@ -0,0 +1,21 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { explodePromise } from './explodePromise';
|
||||
|
||||
export async function loadImage(src: string): Promise<HTMLImageElement> {
|
||||
const { promise, resolve, reject } = explodePromise<void>();
|
||||
|
||||
const img = new Image();
|
||||
img.addEventListener('load', () => resolve(), { once: true });
|
||||
img.addEventListener(
|
||||
'error',
|
||||
() => reject(new Error('Image failed to load')),
|
||||
{ once: true }
|
||||
);
|
||||
img.src = src;
|
||||
|
||||
await promise;
|
||||
|
||||
return img;
|
||||
}
|
Loading…
Reference in a new issue