From 51fb98f69b6eef6c391a5a7859711a5f0601f467 Mon Sep 17 00:00:00 2001
From: sbel-odoo <151751676+sbel-odoo@users.noreply.github.com>
Date: Wed, 12 Feb 2025 04:54:46 +0100
Subject: [PATCH] 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.
---
 src/util.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/util.ts b/src/util.ts
index d418b621..516616e3 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -183,8 +183,11 @@ export function canvasToBlob(
 export function createImage(url: string): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
     const img = new Image()
-    img.decode = () => resolve(img) as any
-    img.onload = () => resolve(img)
+    img.onload = () => {
+      img.decode().then(() => {
+        requestAnimationFrame(() => resolve(img))
+      })
+    }
     img.onerror = reject
     img.crossOrigin = 'anonymous'
     img.decoding = 'async'