Fix adding sticker in media editor

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
This commit is contained in:
automated-signal 2024-10-01 12:50:51 -05:00 committed by GitHub
parent 106158feec
commit 1fafd912eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 28 additions and 10 deletions

View file

@ -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(

View file

@ -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
View 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;
}