fix(🏞️): add output parameter to makeImageSnapshot() (#3155)

Author: wcandillon

packages/skia/cpp/api/JsiSkImageFactory.h

@@ -17,6 +17,11 @@ namespace jsi = facebook::jsi;
 
 class JsiSkImageFactory : public JsiSkHostObject {
 public:
+  JSI_HOST_FUNCTION(MakeNull) {
+    return jsi::Object::createFromHostObject(
+        runtime, std::make_shared<JsiSkImage>(getContext(), nullptr));
+  }
+
   JSI_HOST_FUNCTION(MakeImageFromEncoded) {
     auto data = JsiSkData::fromValue(runtime, arguments[0]);
     auto image = SkImages::DeferredFromEncodedData(data);
@@ -86,6 +91,13 @@ class JsiSkImageFactory : public JsiSkHostObject {
     if (image == nullptr) {
       throw std::runtime_error("Failed to convert native texture to SkImage!");
     }
+    if (count > 4 && arguments[4].isObject() &&
+        arguments[4].asObject(runtime).isHostObject(runtime)) {
+      auto jsiImage = arguments[4].asObject(runtime).asHostObject<JsiSkImage>(
+          runtime);
+      jsiImage->setObject(image);
+      return jsi::Value(runtime, arguments[4]);
+    }
     return jsi::Object::createFromHostObject(
         runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
   }
@@ -96,7 +108,8 @@ class JsiSkImageFactory : public JsiSkHostObject {
                                        MakeImageFromNativeBuffer),
                        JSI_EXPORT_FUNC(JsiSkImageFactory,
                                        MakeImageFromNativeTextureUnstable),
-                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImage))
+                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImage),
+                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeNull))
 
   explicit JsiSkImageFactory(std::shared_ptr<RNSkPlatformContext> context)
       : JsiSkHostObject(std::move(context)) {}

packages/skia/cpp/api/JsiSkSurface.h

@@ -64,7 +64,7 @@ class JsiSkSurface : public JsiSkWrappingSkPtrHostObject<SkSurface> {
   JSI_HOST_FUNCTION(makeImageSnapshot) {
     auto surface = getObject();
     sk_sp<SkImage> image;
-    if (count == 1) {
+    if (count > 0 && arguments[0].isObject()) {
       auto rect = JsiSkRect::fromValue(runtime, arguments[0]);
       image = surface->makeImageSnapshot(SkIRect::MakeXYWH(
           rect->x(), rect->y(), rect->width(), rect->height()));
@@ -75,6 +75,11 @@ class JsiSkSurface : public JsiSkWrappingSkPtrHostObject<SkSurface> {
     auto recording = surface->recorder()->snap();
     DawnContext::getInstance().submitRecording(recording.get());
 #endif
+    if (count > 1 && arguments[1].isObject()) {
+      auto jsiImage = arguments[1].asObject(runtime).asHostObject<JsiSkImage>(runtime);
+      jsiImage->setObject(image);
+      return jsi::Value(runtime, arguments[1]);
+    }
     return jsi::Object::createFromHostObject(
         runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
   }

packages/skia/src/renderer/__tests__/e2e/DataEncoding.spec.tsx

@@ -52,7 +52,9 @@ describe("Data Encoding", () => {
       const offscreen = Skia.Surface.MakeOffscreen(1, 1)!;
       const canvas = offscreen.getCanvas();
       canvas.drawImage(img, 0, 0);
-      return Array.from(offscreen.makeImageSnapshot().encodeToBytes());
+      const snapshotImage = Skia.Image.MakeNull();
+      offscreen.makeImageSnapshot(undefined, snapshotImage);
+      return Array.from(snapshotImage.encodeToBytes());
     });
     expect(result.length).toBeGreaterThan(0);
   });
@@ -68,7 +70,9 @@ describe("Data Encoding", () => {
       const offscreen = Skia.Surface.MakeOffscreen(1, 1)!;
       const canvas = offscreen.getCanvas();
       canvas.drawImage(img, 0, 0);
-      return offscreen.makeImageSnapshot().encodeToBase64();
+      const snapshotImage = Skia.Image.MakeNull();
+      offscreen.makeImageSnapshot(undefined, snapshotImage);
+      return snapshotImage.encodeToBase64();
     });
     expect(result.length).toBeGreaterThan(0);
   });

packages/skia/src/skia/types/Image/ImageFactory.ts

@@ -21,6 +21,7 @@ export interface ImageInfo {
 }
 
 export interface ImageFactory {
+  MakeNull: () => SkImage;
   /**
    * Return an Image backed by the encoded data, but attempt to defer decoding until the image
    * is actually used/drawn. This deferral allows the system to cache the result, either on the
@@ -70,7 +71,8 @@ export interface ImageFactory {
     texture: unknown,
     width: number,
     height: number,
-    mipmapped?: boolean
+    mipmapped?: boolean,
+    outputImage?: SkImage
   ) => SkImage;
 
   /**

packages/skia/src/skia/types/Surface/Surface.ts

@@ -35,7 +35,7 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
 
       example: https://fiddle.skia.org/c/@Surface_makeImageSnapshot
   */
-  makeImageSnapshot(bounds?: SkRect): SkImage;
+  makeImageSnapshot(bounds?: SkRect, outputImage?: SkImage): SkImage;
 
   /**
    * Make sure any queued draws are sent to the screen or the GPU.

packages/skia/src/skia/web/JsiSkImageFactory.ts

@@ -20,6 +20,10 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
     super(CanvasKit);
   }
 
+  MakeNull() {
+    return new JsiSkImage(this.CanvasKit, null as unknown as Image);
+  }
+
   MakeImageFromViewTag(viewTag: number): Promise<SkImage | null> {
     const view = viewTag as unknown as HTMLElement;
     // TODO: Implement screenshot from view in React JS

packages/skia/src/skia/web/JsiSkSurface.ts

@@ -35,12 +35,15 @@ export class JsiSkSurface
     return new JsiSkCanvas(this.CanvasKit, this.ref.getCanvas());
   }
 
-  makeImageSnapshot(bounds?: SkRect): SkImage {
+  makeImageSnapshot(bounds?: SkRect, outputImage?: JsiSkImage): SkImage {
     const image = this.ref.makeImageSnapshot(
       bounds
         ? Array.from(JsiSkRect.fromValue(this.CanvasKit, bounds))
         : undefined
     );
+    if (outputImage) {
+      outputImage.ref = image;
+    }
     return new JsiSkImage(this.CanvasKit, image);
   }