Introduce new image toBlob API function signature

[raedle]

Summary: Introducing new toBlob API that works directly on the ImageHostObject rather than fetching the instance from the JSContext. This is a step towards deprecating the NativeJSRef in favor of a full JSI supported API.

Playground.tsx

import {useIsFocused} from 'react-navigation/native';
import * as React from 'react';
import {Button, StyleSheet, View} from 'react-native';
import {ImageUtil, media} from 'react-native-pytorch-core';

export default function Playground() {
  const isFocused = useIsFocused();

  const handleImage = async () => {
    const image1 = await ImageUtil.fromURL(
      'https://github.com/raedle/test-some/releases/download/v0.0.2.0/zidane.jpeg',
    );
    const width = image1.getWidth();
    const height = image1.getHeight();
    const blob1 = media.toBlob(image1);
    console.log('image1', image1);
    console.log('blob1', blob1);
    const image2 = media.imageFromBlob(blob1, width, height);
    const blob2 = media.toBlob(image2);
    console.log('image2', image2);
    console.log('blob2', blob2);

    image1.release();
  };

  if (!isFocused) {
    return null;
  }

  return (
    <View style={StyleSheet.absoluteFill}>
      <Button title="Convert to blob" onPress={handleImage} />
    </View>
  );
}

Before Android Output

 LOG  image1 {"ID": "54c0bd8c-6304-4911-9fc0-baa23dfcccdd", "getHeight": [Function getHeight], "getNaturalHeight": [Function getNaturalHeight], "getNaturalWidth": [Function getNaturalWidth], "getPixelDensity": [Function getPixelDensity], "getWidth": [Function getWidth], "release": [Function release], "scale": [Function scale]}
 LOG  blob1 {"arrayBuffer": [Function arrayBuffer], "size": 921600, "slice": [Function slice], "type": "image/x-playtorch-rgb"}
 LOG  image2 {"ID": "6b4e99f7-e096-462a-9b19-f1e04f2ee104", "getHeight": [Function getHeight], "getNaturalHeight": [Function getNaturalHeight], "getNaturalWidth": [Function getNaturalWidth], "getPixelDensity": [Function getPixelDensity], "getWidth": [Function getWidth], "release": [Function release], "scale": [Function scale]}
 LOG  blob2 {"arrayBuffer": [Function arrayBuffer], "size": 921600, "slice": [Function slice], "type": "image/x-playtorch-rgb"}

After Android Output

(temporarily changed the blobType to Blob::kBlobTypeImageRGB + std::string("new_func") to differentiate between the toBlob(std::string& refId) and std::unique_ptr<torchlive::media::Blob> toBlob(std::shared_ptr<IImage> image) function calls

 LOG  image1 {"ID": "c94513a8-e454-4e47-b151-79af2d557178", "getHeight": [Function getHeight], "getNaturalHeight": [Function getNaturalHeight], "getNaturalWidth": [Function getNaturalWidth], "getPixelDensity": [Function getPixelDensity], "getWidth": [Function getWidth], "release": [Function release], "scale": [Function scale]}
 LOG  blob1 {"arrayBuffer": [Function arrayBuffer], "size": 921600, "slice": [Function slice], "type": "image/x-playtorch-rgb"}
 LOG  image2 {"ID": "9ea46769-a9eb-42e8-a2ff-e96ba7bdf8f0", "getHeight": [Function getHeight], "getNaturalHeight": [Function getNaturalHeight], "getNaturalWidth": [Function getNaturalWidth], "getPixelDensity": [Function getPixelDensity], "getWidth": [Function getWidth], "release": [Function release], "scale": [Function scale]}
 LOG  blob2 {"arrayBuffer": [Function arrayBuffer], "size": 921600, "slice": [Function slice], "type": "image/x-playtorch-rgbnew_func"}

Before iOS Output

 LOG  image1 {"ID": "94CDD792-612C-413B-BA54-DA2687C757E2", "getHeight": [Function getHeight], "getNaturalHeight": [Function getNaturalHeight], "getNaturalWidth": [Function getNaturalWidth], "getPixelDensity": [Function getPixelDensity], "getWidth": [Function getWidth], "release": [Function release], "scale": [Function scale]}
 LOG  blob1 {"arrayBuffer": [Function arrayBuffer], "size": 921600, "slice": [Function slice], "type": "image/x-playtorch-rgb"}
 LOG  image2 {"ID": "E1CC23D8-9ED9-4DC5-B115-6DB0B284947C", "getHeight": [Function getHeight], "getNaturalHeight": [Function getNaturalHeight], "getNaturalWidth": [Function getNaturalWidth], "getPixelDensity": [Function getPixelDensity], "getWidth": [Function getWidth], "release": [Function release], "scale": [Function scale]}
 LOG  blob2 {"arrayBuffer": [Function arrayBuffer], "size": 1228800, "slice": [Function slice], "type": "image/x-playtorch-rgb"}

After iOS Output

(temporarily changed the blobType to Blob::kBlobTypeImageRGB + std::string("new_func") to differentiate between the toBlob(std::string& refId) and std::unique_ptr<torchlive::media::Blob> toBlob(std::shared_ptr<IImage> image) function calls

 LOG  image1 {"ID": "7738D4 (https://github.com/facebookresearch/playtorch/commit/71a14489b005facaf135070a5eae5bdfaa6bb0b4)E2-373B-4B07-8CAF-538F7BEA77D0", "getHeight": [Function getHeight], "getNaturalHeight": [Function getNaturalHeight], "getNaturalWidth": [Function getNaturalWidth], "getPixelDensity": [Function getPixelDensity], "getWidth": [Function getWidth], "release": [Function release], "scale": [Function scale]}
 LOG  blob1 {"arrayBuffer": [Function arrayBuffer], "size": 921600, "slice": [Function slice], "type": "image/x-playtorch-rgb"}
 LOG  image2 {"ID": "1CF6BE0E-3C04-4937-90BD-41F3FEDC4AED", "getHeight": [Function getHeight], "getNaturalHeight": [Function getNaturalHeight], "getNaturalWidth": [Function getNaturalWidth], "getPixelDensity": [Function getPixelDensity], "getWidth": [Function getWidth], "release": [Function release], "scale": [Function scale]}
 LOG  blob2 {"arrayBuffer": [Function arrayBuffer], "size": 1228800, "slice": [Function slice], "type": "image/x-playtorch-rgbnew_func"}

Differential Revision: D40747567

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

| Name | Status | Preview | Updated | | :--- | :----- | :------ | :------ | | **playtorch** | ⬜️ Ignored ([Inspect](https://vercel.com/fbopensource/playtorch/GfpP5NBoeor3CpPszZqFHqzEij9n)) | | Oct 28, 2022 at 4:20AM (UTC) |

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D40747567