jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support APNGs in Sticker Creator

This commit is contained in:
Evan Hahn 2020-09-28 13:40:26 -05:00 committed by Josh Perez
parent 6b3d5c19b3
commit bdd71e4898
20 changed files with 542 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -25,6 +25,7 @@ test/blanket_mocha.js
# TypeScript generated files
ts/**/*.js
sticker-creator/**/*.js
!sticker-creator/preload.js
**/*.d.ts
webpack.config.ts

20
_locales/en/messages.json
View File

@ -2331,7 +2331,7 @@
"description": "Title for the drop stage of the sticker creator"
},
"StickerCreator--DropStage--help": {
"message": "Stickers must be in PNG or WebP format with a transparent background and 512x512 pixels. Recommended margin is 16px.",
"message": "Stickers must be in PNG, APNG, or WebP format with a transparent background and 512x512 pixels. Recommended margin is 16px.",
"description": "Help text for the drop stage of the sticker creator"
},
"StickerCreator--DropStage--showMargins": {
@ -2460,7 +2460,23 @@
},
"StickerCreator--Toasts--errorProcessing": {
"message": "Error processing image",
"description": "Text for the toast when an image cannot be processed was dropped on the sticker creator"
"description": "Text for the toast when an image cannot be processed was dropped on the sticker creator with a generic error"
},
"StickerCreator--Toasts--APNG--notSquare": {
"message": "Animated PNG stickers must be square",
"description": "Text for the toast when someone tries to upload a non-square APNG"
},
"StickerCreator--Toasts--mustLoopForever": {
"message": "Animated stickers must loop forever",
"description": "Text for the toast when an image in the sticker creator does not animate forever"
},
"StickerCreator--Toasts--APNG--dimensionsTooLarge": {
"message": "Animated PNG sticker dimensions are too large",
"description": "Text for the toast when an APNG image in the sticker creator is too large"
},
"StickerCreator--Toasts--APNG--dimensionsTooSmall": {
"message": "Animated PNG sticker dimensions are too small",
"description": "Text for the toast when an APNG image in the sticker creator is too small"
},
"StickerCreator--Toasts--errorUploading": {
"message": "Error uploading stickers: $message$",

BIN
fixtures/2x2.bmp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 B

BIN
fixtures/Animated_PNG_example_bouncing_beach_ball.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
fixtures/apng_with_2_plays.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 646 B

BIN
fixtures/kitten-1-64-64.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

1
js/modules/types/message.js
View File

@ -508,7 +508,6 @@ exports.processNewSticker = async (
});
return {
contentType: 'image/webp',
path,
width,
height,

16
sticker-creator/app/stages/MetaStage.tsx
View File

@ -1,8 +1,9 @@
import * as React from 'react';
import { FileWithPath, useDropzone } from 'react-dropzone';
import { FileWithPath } from 'react-dropzone';
import { AppStage } from './AppStage';
import * as styles from './MetaStage.scss';
import { convertToWebp } from '../../util/preload';
import { processStickerImage } from '../../util/preload';
import { useStickerDropzone } from '../../util/useStickerDropzone';
import { history } from '../../util/history';
import { H2, Text } from '../../elements/Typography';
import { LabeledInput } from '../../elements/LabeledInput';
@ -22,8 +23,8 @@ export const MetaStage: React.ComponentType = () => {
const onDrop = React.useCallback(
async ([{ path }]: Array<FileWithPath>) => {
try {
const webp = await convertToWebp(path);
actions.setCover(webp);
const stickerImage = await processStickerImage(path);
actions.setCover(stickerImage);
} catch (e) {
actions.removeSticker(path);
}
@ -31,10 +32,9 @@ export const MetaStage: React.ComponentType = () => {
[actions]
);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: ['image/png', 'image/webp'],
});
const { getRootProps, getInputProps, isDragActive } = useStickerDropzone(
onDrop
);
const onNext = React.useCallback(() => {
setConfirming(true);

12
sticker-creator/components/StickerGrid.tsx
View File

@ -9,7 +9,7 @@ import * as styles from './StickerGrid.scss';
import { Props as StickerFrameProps, StickerFrame } from './StickerFrame';
import { stickersDuck } from '../store';
import { DropZone, Props as DropZoneProps } from '../elements/DropZone';
import { convertToWebp } from '../util/preload';
import { processStickerImage } from '../util/preload';
const queue = new PQueue({ concurrency: 3, timeout: 1000 * 60 * 2 });
@ -17,7 +17,7 @@ const SmartStickerFrame = SortableElement(
({ id, showGuide, mode }: StickerFrameProps) => {
const data = stickersDuck.useStickerData(id);
const actions = stickersDuck.useStickerActions();
const image = data.webp ? data.webp.src : undefined;
const image = data.imageData ? data.imageData.src : undefined;
return (
<StickerFrame
@ -52,13 +52,15 @@ const InnerGrid = SortableContainer(
paths.forEach(path => {
queue.add(async () => {
try {
const webp = await convertToWebp(path);
actions.addWebp(webp);
const stickerImage = await processStickerImage(path);
actions.addImageData(stickerImage);
} catch (e) {
window.log.error('Error processing image:', e);
actions.removeSticker(path);
actions.addToast({
key: 'StickerCreator--Toasts--errorProcessing',
key:
(e || {}).errorMessageI18nKey ||
'StickerCreator--Toasts--errorProcessing',
});
}
});

10
sticker-creator/elements/DropZone.tsx
View File

@ -1,7 +1,8 @@
import * as React from 'react';
import { useDropzone, FileWithPath } from 'react-dropzone';
import { FileWithPath } from 'react-dropzone';
import * as styles from './DropZone.scss';
import { useI18n } from '../util/i18n';
import { useStickerDropzone } from '../util/useStickerDropzone';
export type Props = {
readonly inner?: boolean;
@ -32,10 +33,9 @@ export const DropZone: React.ComponentType<Props> = props => {
[onDrop]
);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop: handleDrop,
accept: ['image/png', 'image/webp'],
});
const { getRootProps, getInputProps, isDragActive } = useStickerDropzone(
handleDrop
);
React.useEffect(() => {
if (onDragActive) {

97
sticker-creator/preload.js
View File

@ -12,6 +12,11 @@ const { makeGetter } = require('../preload_utils');
const { dialog } = remote;
const { nativeTheme } = remote.require('electron');
const STICKER_SIZE = 512;
const MIN_STICKER_DIMENSION = 10;
const MAX_STICKER_DIMENSION = STICKER_SIZE;
const MAX_ANIMATED_STICKER_BYTE_LENGTH = 300 * 1024;
window.ROOT_PATH = window.location.href.startsWith('file') ? '../../' : '/';
window.PROTO_ROOT = '../../protos';
window.getEnvironment = () => config.environment;
@ -32,6 +37,9 @@ window.Signal = Signal.setup({});
window.textsecure = require('../ts/textsecure').default;
const { initialize: initializeWebAPI } = require('../ts/textsecure/WebAPI');
const {
getAnimatedPngDataIfExists,
} = require('../ts/util/getAnimatedPngDataIfExists');
const WebAPI = initializeWebAPI({
url: config.serverUrl,
@ -49,25 +57,83 @@ const WebAPI = initializeWebAPI({
version: config.version,
});
window.convertToWebp = async (path, width = 512, height = 512) => {
function processStickerError(message, i18nKey) {
const result = new Error(message);
result.errorMessageI18nKey = i18nKey;
return result;
}
window.processStickerImage = async path => {
const imgBuffer = await pify(readFile)(path);
const sharpImg = sharp(imgBuffer);
const meta = await sharpImg.metadata();
const buffer = await sharpImg
.resize({
width,
height,
fit: 'contain',
background: { r: 0, g: 0, b: 0, alpha: 0 },
})
.webp()
.toBuffer();
const { width, height } = meta;
if (!width || !height) {
throw processStickerError(
'Sticker height or width were falsy',
'StickerCreator--Toasts--errorProcessing'
);
}
let contentType;
let processedBuffer;
// [Sharp doesn't support APNG][0], so we do something simpler: validate the file size
// and dimensions without resizing, cropping, or converting. In a perfect world, we'd
// resize and convert any animated image (GIF, animated WebP) to APNG.
// [0]: https://github.com/lovell/sharp/issues/2375
const animatedPngDataIfExists = getAnimatedPngDataIfExists(imgBuffer);
if (animatedPngDataIfExists) {
if (imgBuffer.byteLength > MAX_ANIMATED_STICKER_BYTE_LENGTH) {
throw processStickerError(
'Sticker file was too large',
'StickerCreator--Toasts--tooLarge'
);
}
if (width !== height) {
throw processStickerError(
'Sticker must be square',
'StickerCreator--Toasts--APNG--notSquare'
);
}
if (width > MAX_STICKER_DIMENSION) {
throw processStickerError(
'Sticker dimensions are too large',
'StickerCreator--Toasts--APNG--dimensionsTooLarge'
);
}
if (width < MIN_STICKER_DIMENSION) {
throw processStickerError(
'Sticker dimensions are too small',
'StickerCreator--Toasts--APNG--dimensionsTooSmall'
);
}
if (animatedPngDataIfExists.numPlays !== Infinity) {
throw processStickerError(
'Animated stickers must loop forever',
'StickerCreator--Toasts--mustLoopForever'
);
}
contentType = 'image/png';
processedBuffer = imgBuffer;
} else {
contentType = 'image/webp';
processedBuffer = await sharpImg
.resize({
width: STICKER_SIZE,
height: STICKER_SIZE,
fit: 'contain',
background: { r: 0, g: 0, b: 0, alpha: 0 },
})
.webp()
.toBuffer();
}
return {
path,
buffer,
src: `data:image/webp;base64,${buffer.toString('base64')}`,
buffer: processedBuffer,
src: `data:${contentType};base64,${processedBuffer.toString('base64')}`,
meta,
};
};
@ -108,7 +174,10 @@ window.encryptAndUpload = async (
password,
});
const uniqueStickers = uniqBy([...stickers, { webp: cover }], 'webp');
const uniqueStickers = uniqBy(
[...stickers, { imageData: cover }],
'imageData'
);
const manifestProto = new window.textsecure.protobuf.StickerPack();
manifestProto.title = manifest.title;
@ -133,7 +202,7 @@ window.encryptAndUpload = async (
);
const encryptedStickers = await pMap(
uniqueStickers,
({ webp }) => encrypt(webp.buffer, encryptionKey, iv),
({ imageData }) => encrypt(imageData.buffer, encryptionKey, iv),
{
concurrency: 3,
timeout: 1000 * 60 * 2,

38
sticker-creator/store/ducks/stickers.ts
View File

@ -15,18 +15,24 @@ import { bindActionCreators } from 'redux';
import arrayMove from 'array-move';
// eslint-disable-next-line import/no-cycle
import { AppState } from '../reducer';
import { PackMetaData, WebpData, StickerData } from '../../util/preload';
import {
PackMetaData,
StickerImageData,
StickerData,
} from '../../util/preload';
import { EmojiPickDataType } from '../../../ts/components/emoji/EmojiPicker';
import { convertShortName } from '../../../ts/components/emoji/lib';
export const initializeStickers = createAction<Array<string>>(
'stickers/initializeStickers'
);
export const addWebp = createAction<WebpData>('stickers/addSticker');
export const addImageData = createAction<StickerImageData>(
'stickers/addSticker'
);
export const removeSticker = createAction<string>('stickers/removeSticker');
export const moveSticker = createAction<SortEnd>('stickers/moveSticker');
export const setCover = createAction<WebpData>('stickers/setCover');
export const resetCover = createAction<WebpData>('stickers/resetCover');
export const setCover = createAction<StickerImageData>('stickers/setCover');
export const resetCover = createAction<StickerImageData>('stickers/resetCover');
export const setEmoji = createAction<{ id: string; emoji: EmojiPickDataType }>(
'stickers/setEmoji'
);
@ -48,7 +54,7 @@ export const maxStickers = 200;
export const maxByteSize = 100 * 1024;
interface StateStickerData {
readonly webp?: WebpData;
readonly imageData?: StickerImageData;
readonly emoji?: EmojiPickDataType;
}
@ -59,7 +65,7 @@ interface StateToastData {
export type State = {
readonly order: Array<string>;
readonly cover?: WebpData;
readonly cover?: StickerImageData;
readonly title: string;
readonly author: string;
readonly packId: string;
@ -71,7 +77,7 @@ export type State = {
};
export type Actions = {
addWebp: typeof addWebp;
addImageData: typeof addImageData;
initializeStickers: typeof initializeStickers;
removeSticker: typeof removeSticker;
moveSticker: typeof moveSticker;
@ -100,7 +106,7 @@ const adjustCover = (state: Draft<State>) => {
const first = state.order[0];
if (first) {
state.cover = state.data[first].webp;
state.cover = state.data[first].imageData;
} else {
delete state.cover;
}
@ -121,7 +127,7 @@ export const reducer = reduceReducers<State>(
});
}),
handleAction(addWebp, (state, { payload }) => {
handleAction(addImageData, (state, { payload }) => {
if (isNumber(payload.meta.pages)) {
state.toasts.push({ key: 'StickerCreator--Toasts--animated' });
pull(state.order, payload.path);
@ -133,9 +139,9 @@ export const reducer = reduceReducers<State>(
} else {
const data = state.data[payload.path];
// If we are adding webp data, proceed to update the state and add/update a toast
if (data && !data.webp) {
data.webp = payload;
// If we are adding image data, proceed to update the state and add/update a toast
if (data && !data.imageData) {
data.imageData = payload;
const key = 'StickerCreator--Toasts--imagesAdded';
@ -223,7 +229,7 @@ export const useTitle = (): string =>
export const useAuthor = (): string =>
useSelector(({ stickers }: AppState) => stickers.author);
export const useCover = (): WebpData | undefined =>
export const useCover = (): StickerImageData | undefined =>
useSelector(({ stickers }: AppState) => stickers.cover);
export const useStickerOrder = (): Array<string> =>
@ -237,7 +243,7 @@ export const useStickersReady = (): boolean =>
({ stickers }: AppState) =>
stickers.order.length >= minStickers &&
stickers.order.length <= maxStickers &&
Object.values(stickers.data).every(({ webp }) => !!webp)
Object.values(stickers.data).every(({ imageData }) => Boolean(imageData))
);
export const useEmojisReady = (): boolean =>
@ -288,7 +294,7 @@ export const useSelectOrderedData = (): Array<StickerData> =>
useSelector(selectOrderedData);
const selectOrderedImagePaths = createSelector(selectOrderedData, data =>
data.map(({ webp }) => (webp as WebpData).src)
data.map(({ imageData }) => imageData.src)
);
export const useOrderedImagePaths = (): Array<string> =>
@ -301,7 +307,7 @@ export const useStickerActions = (): Actions => {
() =>
bindActionCreators(
{
addWebp,
addImageData,
initializeStickers,
removeSticker,
moveSticker,

16
sticker-creator/util/preload.ts
View File

@ -2,32 +2,28 @@ import { Metadata } from 'sharp';
declare global {
interface Window {
convertToWebp: ConvertToWebpFn;
processStickerImage: ProcessStickerImageFn;
encryptAndUpload: EncryptAndUploadFn;
}
}
export type WebpData = {
export type StickerImageData = {
buffer: Buffer;
src: string;
path: string;
meta: Metadata & { pages?: number }; // Pages is not currently in the sharp metadata type
};
export type ConvertToWebpFn = (
path: string,
width?: number,
height?: number
) => Promise<WebpData>;
type ProcessStickerImageFn = (path: string) => Promise<StickerImageData>;
export type StickerData = { webp?: WebpData; emoji?: string };
export type StickerData = { imageData?: StickerImageData; emoji?: string };
export type PackMetaData = { packId: string; key: string };
export type EncryptAndUploadFn = (
manifest: { title: string; author: string },
stickers: Array<StickerData>,
cover: WebpData,
cover: StickerImageData,
onProgress?: () => unknown
) => Promise<PackMetaData>;
export const { encryptAndUpload, convertToWebp } = window;
export const { encryptAndUpload, processStickerImage } = window;

16
sticker-creator/util/useStickerDropzone.ts Normal file
View File

@ -0,0 +1,16 @@
import { useDropzone, DropzoneOptions } from 'react-dropzone';
export const useStickerDropzone = (
onDrop: DropzoneOptions['onDrop']
): ReturnType<typeof useDropzone> =>
useDropzone({
onDrop,
accept: [
'image/png',
'image/webp',
// Some OSes recognize .apng files with the MIME type but others don't, so we supply
// the extension too.
'image/apng',
'.apng',
],
});

21
ts/models/conversations.ts
View File

@ -14,6 +14,8 @@ import {
} from '../state/ducks/conversations';
import { ColorType } from '../types/Colors';
import { MessageModel } from './messages';
import { sniffImageMimeType } from '../util/sniffImageMimeType';
import { MIMEType, IMAGE_WEBP } from '../types/MIME';
/* eslint-disable more/no-then */
window.Whisper = window.Whisper || {};
@ -1773,6 +1775,23 @@ export class ConversationModel extends window.Backbone.Model<
const { path, width, height } = stickerData;
const arrayBuffer = await readStickerData(path);
// We need this content type to be an image so we can display an `<img>` instead of a
// `<video>` or an error, but it's not critical that we get the full type correct.
// In other words, it's probably fine if we say that a GIF is `image/png`, but it's
// but it's bad if we say it's `video/mp4` or `text/plain`. We do our best to sniff
// the MIME type here, but it's okay if we have to use a possibly-incorrect
// fallback.
let contentType: MIMEType;
const sniffedMimeType = sniffImageMimeType(arrayBuffer);
if (sniffedMimeType) {
contentType = sniffedMimeType;
} else {
window.log.warn(
'Unable to sniff sticker MIME type; falling back to WebP'
);
contentType = IMAGE_WEBP;
}
const sticker = {
packId,
stickerId,
@ -1780,7 +1799,7 @@ export class ConversationModel extends window.Backbone.Model<
data: {
size: arrayBuffer.byteLength,
data: arrayBuffer,
contentType: 'image/webp',
contentType,
width,
height,
},

57
ts/test/util/getAnimatedPngDataIfExists_test.ts Normal file
View File

@ -0,0 +1,57 @@
import * as fs from 'fs';
import * as path from 'path';
import { assert } from 'chai';
import { getAnimatedPngDataIfExists } from '../../util/getAnimatedPngDataIfExists';
describe('getAnimatedPngDataIfExists', () => {
const fixture = (filename: string): Promise<Buffer> => {
const fixturePath = path.join(
__dirname,
'..',
'..',
'..',
'fixtures',
filename
);
return fs.promises.readFile(fixturePath);
};
it('returns null for empty buffers', () => {
assert.isNull(getAnimatedPngDataIfExists(Buffer.alloc(0)));
});
it('returns null for non-PNG files', async () => {
await Promise.all(
[
'kitten-1-64-64.jpg',
'512x515-thumbs-up-lincoln.webp',
'giphy-GVNvOUpeYmI7e.gif',
'pixabay-Soap-Bubble-7141.mp4',
'lorem-ipsum.txt',
].map(async filename => {
assert.isNull(getAnimatedPngDataIfExists(await fixture(filename)));
})
);
});
it('returns null for non-animated PNG files', async () => {
assert.isNull(
getAnimatedPngDataIfExists(await fixture('20x200-yellow.png'))
);
});
it('returns data for animated PNG files', async () => {
assert.deepEqual(
getAnimatedPngDataIfExists(
await fixture('Animated_PNG_example_bouncing_beach_ball.png')
),
{ numPlays: Infinity }
);
assert.deepEqual(
getAnimatedPngDataIfExists(await fixture('apng_with_2_plays.png')),
{ numPlays: 2 }
);
});
});

92
ts/test/util/sniffImageMimeType_test.ts Normal file
View File

@ -0,0 +1,92 @@
import * as fs from 'fs';
import * as path from 'path';
import { assert } from 'chai';
import {
IMAGE_BMP,
IMAGE_GIF,
IMAGE_ICO,
IMAGE_JPEG,
IMAGE_PNG,
IMAGE_WEBP,
} from '../../types/MIME';
import { sniffImageMimeType } from '../../util/sniffImageMimeType';
describe('sniffImageMimeType', () => {
const fixture = (filename: string): Promise<Buffer> => {
const fixturePath = path.join(
__dirname,
'..',
'..',
'..',
'fixtures',
filename
);
return fs.promises.readFile(fixturePath);
};
it('returns undefined for empty buffers', () => {
assert.isUndefined(sniffImageMimeType(new Uint8Array()));
});
it('returns undefined for non-image files', async () => {
await Promise.all(
['pixabay-Soap-Bubble-7141.mp4', 'lorem-ipsum.txt'].map(
async filename => {
assert.isUndefined(sniffImageMimeType(await fixture(filename)));
}
)
);
});
it('sniffs ICO files', async () => {
assert.strictEqual(
sniffImageMimeType(await fixture('kitten-1-64-64.ico')),
IMAGE_ICO
);
});
it('sniffs BMP files', async () => {
assert.strictEqual(sniffImageMimeType(await fixture('2x2.bmp')), IMAGE_BMP);
});
it('sniffs GIF files', async () => {
assert.strictEqual(
sniffImageMimeType(await fixture('giphy-GVNvOUpeYmI7e.gif')),
IMAGE_GIF
);
});
it('sniffs WEBP files', async () => {
assert.strictEqual(
sniffImageMimeType(await fixture('512x515-thumbs-up-lincoln.webp')),
IMAGE_WEBP
);
});
it('sniffs PNG files', async () => {
await Promise.all(
[
'freepngs-2cd43b_bed7d1327e88454487397574d87b64dc_mv2.png',
'Animated_PNG_example_bouncing_beach_ball.png',
].map(async filename => {
assert.strictEqual(
sniffImageMimeType(await fixture(filename)),
IMAGE_PNG
);
})
);
});
it('sniffs JPEG files', async () => {
assert.strictEqual(
sniffImageMimeType(await fixture('kitten-1-64-64.jpg')),
IMAGE_JPEG
);
});
it('handles ArrayBuffers', async () => {
const arrayBuffer = (await fixture('kitten-1-64-64.jpg')).buffer;
assert.strictEqual(sniffImageMimeType(arrayBuffer), IMAGE_JPEG);
});
});

2
ts/types/MIME.ts
View File

@ -8,6 +8,8 @@ export const IMAGE_GIF = 'image/gif' as MIMEType;
export const IMAGE_JPEG = 'image/jpeg' as MIMEType;
export const IMAGE_PNG = 'image/png' as MIMEType;
export const IMAGE_WEBP = 'image/webp' as MIMEType;
export const IMAGE_ICO = 'image/x-icon' as MIMEType;
export const IMAGE_BMP = 'image/bmp' as MIMEType;
export const VIDEO_MP4 = 'video/mp4' as MIMEType;
export const VIDEO_QUICKTIME = 'video/quicktime' as MIMEType;
export const LONG_MESSAGE = 'text/x-signal-plain' as MIMEType;

78
ts/util/getAnimatedPngDataIfExists.ts Normal file
View File

@ -0,0 +1,78 @@
const PNG_SIGNATURE = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
const ACTL_CHUNK_BYTES = new TextEncoder().encode('acTL');
const IDAT_CHUNK_BYTES = new TextEncoder().encode('IDAT');
const MAX_BYTES_TO_READ = 1024 * 1024;
interface AnimatedPngData {
numPlays: number;
}
/**
* This is a naïve implementation. It only performs two checks:
*
* 1. Do the bytes start with the [PNG signature][0]?
* 2. If so, does it contain the [`acTL` chunk][1] before the [`IDAT` chunk][2], in the
* first megabyte?
*
* Though we _could_ only check for the precense of the `acTL` chunk anywhere, we make
* sure it's before the `IDAT` chunk and within the first megabyte. This adds a small
* amount of validity checking and helps us avoid problems with large PNGs.
*
* It doesn't make sure the PNG is valid. It doesn't verify [the CRC code][3] of each PNG
* chunk; it doesn't verify any of the chunk's data; it doesn't verify that the chunks are
* in the right order; etc.
*
* [0]: https://www.w3.org/TR/PNG/#5PNG-file-signature
* [1]: https://wiki.mozilla.org/APNG_Specification#.60acTL.60:_The_Animation_Control_Chunk
* [2]: https://www.w3.org/TR/PNG/#11IDAT
* [3]: https://www.w3.org/TR/PNG/#5Chunk-layout
*/
export function getAnimatedPngDataIfExists(
bytes: Uint8Array
): null | AnimatedPngData {
if (!hasPngSignature(bytes)) {
return null;
}
let numPlays: void | number;
const dataView = new DataView(bytes.buffer);
let i = PNG_SIGNATURE.length;
while (i < bytes.byteLength && i <= MAX_BYTES_TO_READ) {
const chunkTypeBytes = bytes.slice(i + 4, i + 8);
if (areBytesEqual(chunkTypeBytes, ACTL_CHUNK_BYTES)) {
// 4 bytes for the length; 4 bytes for the type; 4 bytes for the number of frames.
numPlays = dataView.getUint32(i + 12);
if (numPlays === 0) {
numPlays = Infinity;
}
return { numPlays };
}
if (areBytesEqual(chunkTypeBytes, IDAT_CHUNK_BYTES)) {
return null;
}
// Jump over the length (4 bytes), the type (4 bytes), the data, and the CRC checksum
// (4 bytes).
i += 12 + dataView.getUint32(i);
}
return null;
}
function hasPngSignature(bytes: Uint8Array): boolean {
return areBytesEqual(bytes.slice(0, 8), PNG_SIGNATURE);
}
function areBytesEqual(a: Uint8Array, b: Uint8Array): boolean {
if (a.byteLength !== b.byteLength) {
return false;
}
for (let i = 0; i < a.byteLength; i += 1) {
if (a[i] !== b[i]) {
return false;
}
}
return true;
}

127
ts/util/sniffImageMimeType.ts Normal file
View File

@ -0,0 +1,127 @@
import {
IMAGE_BMP,
IMAGE_GIF,
IMAGE_ICO,
IMAGE_JPEG,
IMAGE_PNG,
IMAGE_WEBP,
MIMEType,
} from '../types/MIME';
/**
* This follows the [MIME Sniffing Standard for images][0].
*
* [0]: https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
*/
export function sniffImageMimeType(
bytes: ArrayBuffer | Uint8Array
): undefined | MIMEType {
const asTypedArray = new Uint8Array(bytes);
for (let i = 0; i < TYPES.length; i += 1) {
const type = TYPES[i];
if (matchesType(asTypedArray, type)) {
return type.mimeType;
}
}
return undefined;
}
interface Type {
mimeType: MIMEType;
bytePattern: Uint8Array;
patternMask?: Uint8Array;
}
const TYPES: Array<Type> = [
{
mimeType: IMAGE_ICO,
bytePattern: new Uint8Array([0x00, 0x00, 0x01, 0x00]),
},
{
mimeType: IMAGE_ICO,
bytePattern: new Uint8Array([0x00, 0x00, 0x02, 0x00]),
},
{
mimeType: IMAGE_BMP,
bytePattern: new Uint8Array([0x42, 0x4d]),
},
{
mimeType: IMAGE_GIF,
bytePattern: new Uint8Array([0x47, 0x49, 0x46, 0x38, 0x37, 0x61]),
},
{
mimeType: IMAGE_GIF,
bytePattern: new Uint8Array([0x47, 0x49, 0x46, 0x38, 0x39, 0x61]),
},
{
mimeType: IMAGE_WEBP,
bytePattern: new Uint8Array([
0x52,
0x49,
0x46,
0x46,
0x00,
0x00,
0x00,
0x00,
0x57,
0x45,
0x42,
0x50,
0x56,
0x50,
]),
patternMask: new Uint8Array([
0xff,
0xff,
0xff,
0xff,
0x00,
0x00,
0x00,
0x00,
0xff,
0xff,
0xff,
0xff,
0xff,
0xff,
]),
},
{
mimeType: IMAGE_PNG,
bytePattern: new Uint8Array([
0x89,
0x50,
0x4e,
0x47,
0x0d,
0x0a,
0x1a,
0x0a,
]),
},
{
mimeType: IMAGE_JPEG,
bytePattern: new Uint8Array([0xff, 0xd8, 0xff]),
},
];
// This follows the [pattern matching algorithm in the spec][1].
// [1]: https://mimesniff.spec.whatwg.org/#pattern-matching-algorithm
function matchesType(input: Uint8Array, type: Type): boolean {
if (input.byteLength < type.bytePattern.byteLength) {
return false;
}
for (let p = 0; p < type.bytePattern.length; p += 1) {
const mask = type.patternMask ? type.patternMask[p] : 0xff;
// We need to use a bitwise operator here, per the spec.
// eslint-disable-next-line no-bitwise
const maskedData = input[p] & mask;
if (maskedData !== type.bytePattern[p]) {
return false;
}
}
return true;
}