Merge pull request #1500 from Shopify/fix/1459

Fix makeImageSnapshot regression
Shopify · Apr 19, 2023 · 707dc0e · 707dc0e
2 parents e028944 + 21fd2c3
commit 707dc0e
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 2 deletions.
diff --git a/package/cpp/api/JsiSkImage.h b/package/cpp/api/JsiSkImage.h
@@ -104,6 +104,12 @@ class JsiSkImage : public JsiSkWrappingSkPtrHostObject<SkImage> {
     return jsi::String::createFromAscii(runtime, buffer);
   }
 
+  JSI_HOST_FUNCTION(makeNonTextureImage) {
+    auto image = getObject()->makeNonTextureImage();
+    return jsi::Object::createFromHostObject(
+        runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
+  }
+
   JSI_HOST_FUNCTION(dispose) {
     setObject(nullptr);
     return jsi::Value::undefined();
@@ -115,6 +121,7 @@ class JsiSkImage : public JsiSkWrappingSkPtrHostObject<SkImage> {
                        JSI_EXPORT_FUNC(JsiSkImage, makeShaderCubic),
                        JSI_EXPORT_FUNC(JsiSkImage, encodeToBytes),
                        JSI_EXPORT_FUNC(JsiSkImage, encodeToBase64),
+                       JSI_EXPORT_FUNC(JsiSkImage, makeNonTextureImage),
                        JSI_EXPORT_FUNC(JsiSkImage, dispose))
 
   JsiSkImage(std::shared_ptr<RNSkPlatformContext> context,

diff --git a/package/cpp/rnskia/RNSkView.h b/package/cpp/rnskia/RNSkView.h
@@ -99,13 +99,15 @@ class RNSkImageCanvasProvider : public RNSkCanvasProvider {
    Returns a snapshot of the current surface/canvas
    */
   sk_sp<SkImage> makeSnapshot(std::shared_ptr<SkRect> bounds) {
+    sk_sp<SkImage> image;
     if (bounds != nullptr) {
       SkIRect b = SkIRect::MakeXYWH(bounds->x(), bounds->y(), bounds->width(),
                                     bounds->height());
-      return _surface->makeImageSnapshot(b);
+      image = _surface->makeImageSnapshot(b);
     } else {
-      return _surface->makeImageSnapshot();
+      image = _surface->makeImageSnapshot();
     }
+    return image->makeNonTextureImage();
   }
 
   /**

diff --git a/package/src/renderer/__tests__/e2e/Offscreen.spec.tsx b/package/src/renderer/__tests__/e2e/Offscreen.spec.tsx
@@ -29,6 +29,33 @@ describe("Offscreen Drawings", () => {
     expect(data).toBeDefined();
     checkImage(image, docPath("offscreen/circle.png"));
   });
+  it("Should transfer one surface image to another", async () => {
+    const { width, height } = surface;
+    const raw = await surface.eval(
+      (Skia, ctx) => {
+        const r = ctx.width / 2;
+        const backSurface = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
+        const frontSurface = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
+        if (!backSurface || !frontSurface) {
+          throw new Error("Could not create offscreen surface");
+        }
+        const canvas = backSurface.getCanvas();
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("lightblue"));
+        canvas.drawCircle(r, r, r, paint);
+        backSurface.flush();
+        const image = backSurface.makeImageSnapshot().makeNonTextureImage();
+        frontSurface.getCanvas().drawImage(image, 0, 0);
+        return frontSurface.makeImageSnapshot().encodeToBase64();
+      },
+      { width, height }
+    );
+    const { Skia } = importSkia();
+    const data = Skia.Data.fromBase64(raw);
+    const image = Skia.Image.MakeImageFromEncoded(data)!;
+    expect(data).toBeDefined();
+    checkImage(image, docPath("offscreen/circle.png"));
+  });
   it("Should use the React API to build an image", async () => {
     const { width, height } = surface;
     const { drawAsImage } = importSkia();

diff --git a/package/src/skia/types/Image/Image.ts b/package/src/skia/types/Image/Image.ts
@@ -93,4 +93,11 @@ export interface SkImage extends SkJSIInstance<"Image">, JsiDisposable {
     @return  base64 encoded string of data
   */
   encodeToBase64(fmt?: ImageFormat, quality?: number): string;
+
+  /**
+   * Returns raster image or lazy image. Copies SkImage backed by GPU texture
+   * into CPU memory if needed. Returns original SkImage if decoded in raster
+   * bitmap, or if encoded in a stream.
+   */
+  makeNonTextureImage(): SkImage;
 }
diff --git a/package/src/skia/web/JsiSkImage.ts b/package/src/skia/web/JsiSkImage.ts
@@ -113,4 +113,11 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
   dispose() {
     this.ref.delete();
   }
+
+  makeNonTextureImage(): SkImage {
+    return new JsiSkImage(
+      this.CanvasKit,
+      this.CanvasKit.MakeImageFromEncoded(this.encodeToBytes())!
+    );
+  }
 }