Custom dimensions from Canvas Snapshot

[fatiherdogan01]

Hi,
Thank you for this great project.

I need custom dimensions for Instagram (1080 x 566, 1080 x 1350, 320 x 320) etc.
I know my canvas dimensions are multiplied by PixelRatio.get(). This value can be 2, 3 or 3.5.
How can I guarantee the user the expected dimensions?

 const makeImageSnapshot = () => {
    const width = selectedCanvasSize.width; // 300
    const height = selectedCanvasSize.height; // 300


    // region Canvas
    const image = canvasRef.current?.makeImageSnapshot()!;
    if (image) {
      // result 900x900
      const base64 = image.encodeToBase64(ImageFormat.PNG, 100) || '';
      const url = `data:image/${ImageExtension.PNG};base64,${base64}`;
      DownloadHelper.downloadAsset(url, ImageExtension.PNG);
    }
    // endregion


    // region Surface
    const surface = Skia.Surface.MakeOffscreen(width, height)!;
    const canvas = surface.getCanvas();
    const nonTextureImage = image.makeNonTextureImage();
    canvas.drawImage(nonTextureImage, 0, 0);
    surface.flush();
    const snapshot = surface.makeImageSnapshot();
    if (snapshot) {
      // result 300x300 but clipping
      const base64 = snapshot.encodeToBase64(ImageFormat.PNG, 100) || '';
      const url = `data:image/${ImageExtension.PNG};base64,${base64}`;
      DownloadHelper.downloadAsset(url, ImageExtension.PNG);
    }
    // endregion

  };

[fatiherdogan01]

Skia version: 1.3.9

Update:
My solution:
In iOS, if the canvas size pixel ratio was not divided exactly, I was getting incorrect results.
As a solution I use the helper function "drawAsImageFromPicture"

  const makeImageSnapshot = useCallback(async () => {
    const pixelRatio = LayoutHelper.pixelRatio;
    let image;
    const skImage = await canvasRef.current?.makeImageSnapshotAsync()!;
    // I check if the dimensions are exactly divided by pixel ratio in iOS.
    if (canvasSize.width % pixelRatio === 0 && canvasSize.height % pixelRatio === 0) || Platform.OS === 'android') {
      image = skImage;
    } else {
      image = drawAsImageFromPicture(skImage, { width: canvasSize.width, height: canvasSize.height });
    }
  }

export const drawAsImageFromPicture = (skImage: SkImage, canvasSize: Size) => {
  const pixelRatio = LayoutHelper.pixelRatio;
  const surface = Skia.Surface.MakeOffscreen(canvasSize.width * pixelRatio, canvasSize.height * pixelRatio)!;
  const canvas = surface.getCanvas();
  canvas.drawImage(skImage, 0, 0);
  surface.flush();
  return surface.makeImageSnapshot();
};