Image requires a pause before being completed

[backspaces]

When getting an image using

let img = new skiaCanvas.Image(url)

The img is initially: Image { pending, src: undefined } .. but after a pause it is fulfilled: Image { width: 256, height: 256 }

Here's a file, skiaimg, showing this. You can also simply start a repl (deno repl -A --unstable) and drop all the text in it.

skiaimg:

// deno run -A --unstable skiaimg.js

import { delay } from 'https://deno.land/std@0.189.0/async/delay.ts' import * as skiaCanvas from 'https://deno.land/x/skia_canvas@0.5.2/mod.ts' console.log('skiaCanvas', Object.keys(skiaCanvas))

const url = 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/13/1555/3084.png'

// prove url is ok const fetched = await fetch(url).then(resp => resp.blob()) console.log('fetch test', fetched)

// use skia to get image. needs delay let img = new skiaCanvas.Image(url) console.log('img test', img) await delay(1000) console.log('img test', img)

[DjDeveloperr]

It is like the standard Image object in the web - you must wait for onload or onerror to fire. Or just use await Image.load(url).

[backspaces]

Javascript does not have a Image.load as far as I know. This is the promise-ified way to get an image in the browser:

      new Promise((resolve, reject) => {
            const img = new Image()
            img.crossOrigin = 'Anonymous'
            img.onload = () => resolve(img)
            img.onerror = () => reject(`Could not load image ${url}`)
            img.src = url
        })

Would this work with skia?

[DjDeveloperr]

Yep JS does not, it's merely a convenience method in skia canvas. That code should work fine with skia canvas as well.

[backspaces]

Worked! Now both the browser and deno can use the same method for fetching files.