Skip to content

Commit 51fb98f

Browse files
authored
fix: ensure images are totally prcoessed before using them (ios) (#478)
`img.decode = () => resolve(img);` is supposed to ensure that the image is fully processed but is misused. Decode is not a setter, it's a method that returns a promise when the image is fully decoded. While this code wait for the image to load it does not wait for it to be fully ready (processed). `img.decode()` ensures that the image has been fully decoded before continuing. We go one step further with `requestAnimationFrame`. This defers the execution and will ensure that the resolved image is rendered in the next frame. It's more important in devices like Ipad because the broswers tend to handle image operations differently, thus creating rendering and timing issues.
1 parent 27dd94b commit 51fb98f

File tree

1 file changed

+5
-2
lines changed

1 file changed

+5
-2
lines changed

src/util.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -183,8 +183,11 @@ export function canvasToBlob(
183183
export function createImage(url: string): Promise<HTMLImageElement> {
184184
return new Promise((resolve, reject) => {
185185
const img = new Image()
186-
img.decode = () => resolve(img) as any
187-
img.onload = () => resolve(img)
186+
img.onload = () => {
187+
img.decode().then(() => {
188+
requestAnimationFrame(() => resolve(img))
189+
})
190+
}
188191
img.onerror = reject
189192
img.crossOrigin = 'anonymous'
190193
img.decoding = 'async'

0 commit comments

Comments
 (0)