Skip to content

Commit 300eab4

Browse files
author
Michal Biroš
committed
fix(createImage): make waiting on animation frame optional
Added configuration property waitForAnimationFrameAcquired. Default value is false. Closes #502 BREAKING CHANGE: Waiting on animation frame was default behaviour since version 1.11.12. If you rely on this feature, explicitly set waitForAnimationFrameAcquired to true.
1 parent 43a2e27 commit 300eab4

File tree

4 files changed

+20
-8
lines changed

4 files changed

+20
-8
lines changed

src/clone-node.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import {
99
import { getMimeType } from './mimes'
1010
import { resourceToDataURL } from './dataurl'
1111

12-
async function cloneCanvasElement(canvas: HTMLCanvasElement) {
12+
async function cloneCanvasElement(canvas: HTMLCanvasElement, options: Options) {
1313
const dataURL = canvas.toDataURL()
1414
if (dataURL === 'data:,') {
1515
return canvas.cloneNode(false) as HTMLCanvasElement
1616
}
17-
return createImage(dataURL)
17+
return createImage(dataURL, options)
1818
}
1919

2020
async function cloneVideoElement(video: HTMLVideoElement, options: Options) {
@@ -25,13 +25,13 @@ async function cloneVideoElement(video: HTMLVideoElement, options: Options) {
2525
canvas.height = video.clientHeight
2626
ctx?.drawImage(video, 0, 0, canvas.width, canvas.height)
2727
const dataURL = canvas.toDataURL()
28-
return createImage(dataURL)
28+
return createImage(dataURL, options)
2929
}
3030

3131
const poster = video.poster
3232
const contentType = getMimeType(poster)
3333
const dataURL = await resourceToDataURL(poster, contentType, options)
34-
return createImage(dataURL)
34+
return createImage(dataURL, options)
3535
}
3636

3737
async function cloneIFrameElement(iframe: HTMLIFrameElement, options: Options) {
@@ -55,7 +55,7 @@ async function cloneSingleNode<T extends HTMLElement>(
5555
options: Options,
5656
): Promise<HTMLElement> {
5757
if (isInstanceOfElement(node, HTMLCanvasElement)) {
58-
return cloneCanvasElement(node)
58+
return cloneCanvasElement(node, options)
5959
}
6060

6161
if (isInstanceOfElement(node, HTMLVideoElement)) {

src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export async function toCanvas<T extends HTMLElement>(
3131
): Promise<HTMLCanvasElement> {
3232
const { width, height } = getImageSize(node, options)
3333
const svg = await toSvg(node, options)
34-
const img = await createImage(svg)
34+
const img = await createImage(svg, options)
3535

3636
const canvas = document.createElement('canvas')
3737
const context = canvas.getContext('2d')!

src/types.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,11 @@ export interface Options {
8686
* A boolean to turn off auto scaling for truly massive images..
8787
*/
8888
skipAutoScale?: boolean
89+
/**
90+
* An option for rendering the image only when the image is visible on the frame.
91+
* This might be useful for performance reasons when rendering a large number of images.
92+
*/
93+
waitForAnimationFrameAcquired?: boolean
8994
/**
9095
* A string indicating the image format. The default type is image/png; that type is also used if the given type isn't supported.
9196
*/

src/util.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,12 +196,19 @@ export function canvasToBlob(
196196
})
197197
}
198198

199-
export function createImage(url: string): Promise<HTMLImageElement> {
199+
export function createImage(
200+
url: string,
201+
options: Options = {},
202+
): Promise<HTMLImageElement> {
200203
return new Promise((resolve, reject) => {
201204
const img = new Image()
202205
img.onload = () => {
203206
img.decode().then(() => {
204-
requestAnimationFrame(() => resolve(img))
207+
if (options.waitForAnimationFrameAcquired) {
208+
requestAnimationFrame(() => resolve(img))
209+
} else {
210+
resolve(img)
211+
}
205212
})
206213
}
207214
img.onerror = reject

0 commit comments

Comments
 (0)