airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue with lottie_canvas_worker CVImageElement drawImage

romainsimoes opened this issue · comments

Using the lottie_canvas_worker.js from the build, I encounter an issue with CVImageElement.prototype.renderInnerContent.

The following code :
this.canvasContext.drawImage(this.img, 0, 0);

Throw the following error :
Failed to execute 'drawImage' on 'OffscreenCanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.

The this.img object is an instance of ProxyElement and therefore can't be used with the Canvas context drawImage directly.

Do you have any clue about why this happen ?

Further informations :

  • No issue with the lotties files using the lottie_canvas.js
  • The image src is correct and the following code inside CVImageElement.prototype.renderInnerContent draw an image :
try {
      const response = await fetch(this.img.src);
      const blob = await response.blob();
      const imageBitmap = await createImageBitmap(blob);
      this.canvasContext.drawImage(imageBitmap, 0, 0);
 } catch (error) {
      console.error("Error processing image:", error);
 }