diff --git a/src/clone-node.ts b/src/clone-node.ts index 500ce332..203703e8 100644 --- a/src/clone-node.ts +++ b/src/clone-node.ts @@ -9,7 +9,7 @@ async function cloneCanvasElement(canvas: HTMLCanvasElement) { if (dataURL === 'data:,') { return canvas.cloneNode(false) as HTMLCanvasElement } - return createImage(dataURL) + return createImage(dataURL, canvas.onerror) } async function cloneVideoElement(video: HTMLVideoElement, options: Options) { @@ -20,13 +20,13 @@ async function cloneVideoElement(video: HTMLVideoElement, options: Options) { canvas.height = video.clientHeight ctx?.drawImage(video, 0, 0, canvas.width, canvas.height) const dataURL = canvas.toDataURL() - return createImage(dataURL) + return createImage(dataURL, video.onerror) } const poster = video.poster const contentType = getMimeType(poster) const dataURL = await resourceToDataURL(poster, contentType, options) - return createImage(dataURL) + return createImage(dataURL, video.onerror) } async function cloneIFrameElement(iframe: HTMLIFrameElement) { @@ -133,11 +133,11 @@ function cloneCSSStyle(nativeNode: T, clonedNode: T) { ) { value = 'block' } - + if (name === 'd' && clonedNode.getAttribute('d')) { value = `path(${clonedNode.getAttribute('d')})` } - + targetStyle.setProperty( name, value, diff --git a/src/embed-images.ts b/src/embed-images.ts index e05186a5..91840e55 100644 --- a/src/embed-images.ts +++ b/src/embed-images.ts @@ -55,10 +55,11 @@ async function embedImageNode( const dataURL = await resourceToDataURL(url, getMimeType(url), options) await new Promise((resolve, reject) => { clonedNode.onload = resolve + const originalOnError = clonedNode.onerror clonedNode.onerror = async (...params) => { - if (clonedNode.onerror) { + if (originalOnError) { try { - const result = await clonedNode.onerror(...params) + const result = await originalOnError(...params) resolve(result) } catch (error) { reject(error) diff --git a/src/index.ts b/src/index.ts index 2de59a30..7ea3691e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -31,7 +31,7 @@ export async function toCanvas( ): Promise { const { width, height } = getImageSize(node, options) const svg = await toSvg(node, options) - const img = await createImage(svg) + const img = await createImage(svg, node.onerror) const canvas = document.createElement('canvas') const context = canvas.getContext('2d')! diff --git a/src/util.ts b/src/util.ts index d418b621..c82d6901 100644 --- a/src/util.ts +++ b/src/util.ts @@ -180,12 +180,23 @@ export function canvasToBlob( }) } -export function createImage(url: string): Promise { +export function createImage( + url: string, + onerror: OnErrorEventHandler, +): Promise { return new Promise((resolve, reject) => { const img = new Image() img.decode = () => resolve(img) as any img.onload = () => resolve(img) - img.onerror = reject + img.onerror = onerror + ? async (...props) => { + try { + resolve(await onerror(...props)) + } catch (error) { + reject(error) + } + } + : reject img.crossOrigin = 'anonymous' img.decoding = 'async' img.src = url