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

@@ -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'