iOS: implement Image Pixel

doric-android/doric/src/main/java/pub/doric/shader/ImageNode.java

@@ -606,4 +606,15 @@ public class ImageNode extends ViewNode<ImageView> {
             return new JavaValue();
         }
     }
+
+    @DoricMethod
+    public void setImagePixels(JSObject prop) {
+        int width = prop.asObject().getProperty("width").asNumber().toInt();
+        int height = prop.asObject().getProperty("height").asNumber().toInt();
+        byte[] pixels = prop.asObject().getProperty("pixels").asArrayBuffer().value();
+        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
+        ByteBuffer byteBuffer = ByteBuffer.wrap(pixels);
+        bitmap.copyPixelsFromBuffer(byteBuffer);
+        mView.setImageBitmap(bitmap);
+    }
 }

doric-demo/src/ImageProcesserDemo.tsx

@@ -0,0 +1,65 @@
+import {
+  Base64Resource,
+  DrawableResource,
+  Group,
+  Panel,
+  jsx,
+  Color,
+  layoutConfig,
+  Image,
+  RemoteResource,
+  MainBundleResource,
+  Scroller,
+  VLayout,
+  Text,
+  Gravity,
+  createRef,
+  loge,
+} from "doric";
+import { colors, label } from "./utils";
+import { img_base64 } from "./image_base64";
+
+@Entry
+export class ImageProcessorDemo extends Panel {
+  build(root: Group): void {
+    const iv = createRef<Image>();
+    <Scroller parent={root} layoutConfig={layoutConfig().most()}>
+      <VLayout
+        layoutConfig={layoutConfig().mostWidth().fitHeight()}
+        space={10}
+        gravity={Gravity.Center}
+      >
+        <Text
+          layoutConfig={layoutConfig().mostWidth().justHeight()}
+          textSize={30}
+          textColor={Color.WHITE}
+          backgroundColor={colors[5]}
+          textAlignment={Gravity.Center}
+          height={50}
+        >
+          Image Processor
+        </Text>
+        <Image ref={iv} imageUrl="https://doric.pub/logo.png" />
+        <Text
+          onClick={async () => {
+            const imageInfo = await iv.current.getImageInfo(context);
+            loge(imageInfo);
+            const pixels = await iv.current.getImagePixels(context);
+            loge(pixels.byteLength);
+            const data = new Uint8Array(pixels);
+            for (let i = 0; i < data.length - 4; i += 4) {
+              data[i + 3] = 12;
+            }
+            iv.current.imagePixels = {
+              width: imageInfo.width,
+              height: imageInfo.height,
+              pixels: pixels,
+            };
+          }}
+        >
+          Transparent
+        </Text>
+      </VLayout>
+    </Scroller>;
+  }
+}

doric-demo/src/ResourceDemo.tsx

@@ -30,7 +30,7 @@ export class ResourceDemo extends Panel {
       loge(pixels.byteLength);
       const data = new Uint8Array(pixels);
       for (let i = 0; i < data.length - 4; i += 4) {
-        data[i + 3] = 12;
+        data[i + 3] = 0xff / 3;
       }
       iv.current.imagePixels = {
         width: imageInfo.width,
@@ -63,12 +63,12 @@ export class ResourceDemo extends Panel {
           }
         />
         <Image
-          ref={iv}
           image={
             new RemoteResource("https://p.upyun.com/demo/webp/webp/jpg-0.webp")
           }
         />
         <Image
+          ref={iv}
           image={new Base64Resource(img_base64[0])}
           onClick={async () => {
             await click();

doric-iOS/Example/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme

@@ -79,6 +79,18 @@
             ReferencedContainer = "container:Example.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
+      <EnvironmentVariables>
+         <EnvironmentVariable
+            key = "CGBITMAP_CONTEXT_LOG_ERRORS"
+            value = "TRUE"
+            isEnabled = "YES">
+         </EnvironmentVariable>
+         <EnvironmentVariable
+            key = "CG_CONTEXT_SHOW_BACKTRACE"
+            value = "TRUE"
+            isEnabled = "YES">
+         </EnvironmentVariable>
+      </EnvironmentVariables>
    </LaunchAction>
    <ProfileAction
       buildConfiguration = "Release"

doric-iOS/Pod/Classes/Engine/DoricJSCoreExecutor.m

@@ -20,8 +20,14 @@
 //  Created by pengfei.zhou on 2019/7/25.
 //
 
+#import <DoricCore/DoricExtensions.h>
 #import "DoricJSCoreExecutor.h"
 
+void ReleaseArrayBufferData(void *bytes, void *deallocatorContext) {
+    id data = (__bridge_transfer id) deallocatorContext;
+    data = nil;
+}
+
 @interface DoricJSCoreExecutor ()
 
 @property(nonatomic, strong) JSContext *jsContext;
@@ -57,7 +63,19 @@ - (void)injectGlobalJSObject:(NSString *)name obj:(id)obj {
 
 - (JSValue *)invokeObject:(NSString *)objName method:(NSString *)funcName args:(NSArray *)args {
     JSValue *obj = [self.jsContext objectForKeyedSubscript:objName];
-    JSValue *ret = [obj invokeMethod:funcName withArguments:args];
+    JSValue *ret = [obj invokeMethod:funcName withArguments:[args map:^id(id obj) {
+        if ([obj isKindOfClass:NSData.class]) {
+            NSData *data = (NSData *) obj;
+            JSObjectRef jsObject = JSObjectMakeArrayBufferWithBytesNoCopy(self.jsContext.JSGlobalContextRef,
+                    (void *) data.bytes,
+                    data.length,
+                    ReleaseArrayBufferData,
+                    (__bridge_retained void *) data,
+                    NULL);
+            return [JSValue valueWithJSValueRef:jsObject inContext:self.jsContext];
+        }
+        return obj;
+    }]];
     [self checkJSException];
     return ret;
 }

doric-iOS/Pod/Classes/Engine/JSValue+Doric.h

@@ -0,0 +1,12 @@
+//
+// Created by pengfei.zhou on 2021/11/19.
+//
+
+#import <Foundation/Foundation.h>
+#import <JavaScriptCore/JavaScriptCore.h>
+
+@interface JSValue (Doric)
+- (BOOL)isArrayBuffer;
+
+- (NSData *)toArrayBuffer;
+@end

doric-iOS/Pod/Classes/Engine/JSValue+Doric.m

@@ -0,0 +1,31 @@
+//
+// Created by pengfei.zhou on 2021/11/19.
+//
+
+#import "JSValue+Doric.h"
+
+@implementation JSValue (Doric)
+- (BOOL)isArrayBuffer {
+    JSContextRef ctx = self.context.JSGlobalContextRef;
+    JSValueRef jsValueRef = self.JSValueRef;
+    if (self.isObject) {
+        JSTypedArrayType type = JSValueGetTypedArrayType(ctx, jsValueRef, NULL);
+        return type == kJSTypedArrayTypeArrayBuffer;
+    }
+    return NO;
+}
+
+- (NSData *)toArrayBuffer {
+    if (!self.isArrayBuffer) {
+        return nil;
+    }
+    JSContextRef ctx = self.context.JSGlobalContextRef;
+    JSValueRef jsValueRef = self.JSValueRef;
+    JSObjectRef ref = JSValueToObject(ctx, jsValueRef, NULL);
+    size_t size = JSObjectGetArrayBufferByteLength(ctx, ref, NULL);
+    void *ptr = JSObjectGetArrayBufferBytesPtr(ctx, ref, NULL);
+
+    return [[NSData alloc] initWithBytesNoCopy:ptr length:size freeWhenDone:NO];
+}
+
+@end

doric-iOS/Pod/Classes/Shader/DoricImageNode.m

@@ -25,6 +25,8 @@
 #import "DoricUtil.h"
 #import "DoricSuperNode.h"
 #import "DoricThirdParty.h"
+#import <JavaScriptCore/JavaScriptCore.h>
+#import <JSValue+Doric.h>
 
 #if DORIC_USE_YYWEBIMAGE
 
@@ -576,6 +578,33 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
                             options:NSKeyValueObservingOptionNew
                             context:nil];
 #endif
+    } else if ([@"imagePixels" isEqualToString:name]) {
+        NSDictionary *imagePixels = prop;
+        NSUInteger width = [imagePixels[@"width"] unsignedIntValue];
+        NSUInteger height = [imagePixels[@"height"] unsignedIntValue];
+        NSString *pixelsCallbackId = imagePixels[@"pixels"];
+        [[self callJSResponse:pixelsCallbackId, nil] setResultCallback:^(JSValue *pixelsValue) {
+            if (![pixelsValue isArrayBuffer]) {
+                return;
+            }
+            NSData *data = [pixelsValue toArrayBuffer];
+            [self.doricContext.driver ensureSyncInMainQueue:^{
+                CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+                CGContextRef context = CGBitmapContextCreate((void *) data.bytes,
+                        width,
+                        height,
+                        8,
+                        width * 4,
+                        colorSpace,
+                        kCGImageAlphaPremultipliedLast);
+                CGImageRef imageRef = CGBitmapContextCreateImage(context);
+                UIImage *image = [[UIImage alloc] initWithCGImage:imageRef scale:UIScreen.mainScreen.scale orientation:UIImageOrientationUp];
+                CGImageRelease(imageRef);
+                CGContextRelease(context);
+                CGColorSpaceRelease(colorSpace);
+                self.view.image = image;
+            }];
+        }];
     } else {
         [super blendView:view forPropName:name propValue:prop];
     }
@@ -711,5 +740,35 @@ - (void)dealloc {
         [(DoricImageView *) self.view removeObserver:self forKeyPath:@"currentFrameIndex" context:nil];
 #endif
     }
+- (NSDictionary *)getImageInfo {
+    CGImageRef imageRef = [self.view.image CGImage];
+    return @{
+            @"width": @(CGImageGetWidth(imageRef)),
+            @"height": @(CGImageGetHeight(imageRef)),
+    };
+}
+
+- (NSData *)getImagePixels {
+    CGImageRef imageRef = [self.view.image CGImage];
+    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+    size_t width = CGImageGetWidth(imageRef);
+    size_t height = CGImageGetHeight(imageRef);
+    size_t bytesPerPixel = 4;
+    size_t bytesPerRow = bytesPerPixel * width;
+
+    unsigned char *imageData = malloc(width * height * bytesPerPixel);
+    CGContextRef contextRef = CGBitmapContextCreate(
+            imageData,
+            width,
+            height,
+            8,
+            bytesPerRow,
+            colorSpace,
+            kCGImageAlphaPremultipliedLast);
+    CGContextDrawImage(contextRef, CGRectMake(0, 0, width, height), imageRef);
+    CGColorSpaceRelease(colorSpace);
+    CGContextRelease(contextRef);
+
+    return [[NSData alloc] initWithBytesNoCopy:imageData length:width * height * bytesPerPixel];
 }
 @end

doric-js/bundle/doric-lib.es5.js

@@ -2316,7 +2316,30 @@ var Image = /** @class */ (function (_super) {
     Image.prototype.getImagePixels = function (context) {
         return this.nativeChannel(context, "getImagePixels")();
     };
+<<<<<<< HEAD
     __decorate$b([
+=======
+    Image.prototype.setImagePixels = function (context, imagePixels) {
+        if (Environment.platform === 'iOS') {
+            imagePixels.pixels = context.function2Id(function () {
+                return imagePixels.pixels;
+            });
+        }
+        return this.nativeChannel(context, "setImagePixels")(imagePixels);
+    };
+    Image.prototype.toModel = function () {
+        var ret = _super.prototype.toModel.call(this);
+        if (Environment.platform === 'iOS') {
+            if (Reflect.has(ret.props, "imagePixels")) {
+                var imagePixels = Reflect.get(ret.props, "imagePixels");
+                var pixels_1 = imagePixels.pixels;
+                imagePixels.pixels = this.callback2Id(function () { return pixels_1; });
+            }
+        }
+        return ret;
+    };
+    __decorate$a([
+>>>>>>> 60c3fff0... iOS: implement Image Pixel
         Property,
         __metadata$b("design:type", Object)
     ], Image.prototype, "imagePixels", void 0);

doric-js/bundle/doric-lib.js

@@ -1726,6 +1726,25 @@ class Image extends View {
     getImagePixels(context) {
         return this.nativeChannel(context, "getImagePixels")();
     }
+    setImagePixels(context, imagePixels) {
+        if (Environment.platform === 'iOS') {
+            imagePixels.pixels = context.function2Id(() => {
+                return imagePixels.pixels;
+            });
+        }
+        return this.nativeChannel(context, "setImagePixels")(imagePixels);
+    }
+    toModel() {
+        const ret = super.toModel();
+        if (Environment.platform === 'iOS') {
+            if (Reflect.has(ret.props, "imagePixels")) {
+                const imagePixels = Reflect.get(ret.props, "imagePixels");
+                const pixels = imagePixels.pixels;
+                imagePixels.pixels = this.callback2Id(() => pixels);
+            }
+        }
+        return ret;
+    }
 }
 __decorate$b([
     Property,

doric-js/bundle/doric-vm.js

@@ -3254,6 +3254,25 @@ class Image extends View {
     getImagePixels(context) {
         return this.nativeChannel(context, "getImagePixels")();
     }
+    setImagePixels(context, imagePixels) {
+        if (Environment.platform === 'iOS') {
+            imagePixels.pixels = context.function2Id(() => {
+                return imagePixels.pixels;
+            });
+        }
+        return this.nativeChannel(context, "setImagePixels")(imagePixels);
+    }
+    toModel() {
+        const ret = super.toModel();
+        if (Environment.platform === 'iOS') {
+            if (Reflect.has(ret.props, "imagePixels")) {
+                const imagePixels = Reflect.get(ret.props, "imagePixels");
+                const pixels = imagePixels.pixels;
+                imagePixels.pixels = this.callback2Id(() => pixels);
+            }
+        }
+        return ret;
+    }
 }
 __decorate$b([
     Property,

doric-js/index.d.ts

@@ -248,6 +248,7 @@ declare module 'doric/lib/src/ui/view' {
             onClick?: Function;
             superview?: Superview;
             callbacks: Map<String, Function>;
+            callback2Id(f: Function): string;
             findViewByTag(tag: string): View | undefined;
             constructor();
             /** Anchor start*/
@@ -616,7 +617,7 @@ declare module 'doric/lib/src/widget/text' {
 }
 
 declare module 'doric/lib/src/widget/image' {
-    import { View } from "doric/lib/src/ui/view";
+    import { View, NativeViewModel } from "doric/lib/src/ui/view";
     import { Color } from "doric/lib/src/util/color";
     import { BridgeContext } from "doric/lib/src/runtime/global";
     import { Resource } from "doric/lib/src/util/resource";
@@ -713,6 +714,12 @@ declare module 'doric/lib/src/widget/image' {
                     mimeType: string;
             }>;
             getImagePixels(context: BridgeContext): Promise<ArrayBuffer>;
+            setImagePixels(context: BridgeContext, imagePixels: {
+                    width: number;
+                    height: number;
+                    pixels: ArrayBuffer;
+            }): Promise<void>;
+            toModel(): NativeViewModel;
     }
     export function image(config: Partial<Image>): Image;
 }

doric-js/lib/src/ui/view.d.ts

@@ -62,7 +62,7 @@ export declare abstract class View implements Modeling {
     onClick?: Function;
     superview?: Superview;
     callbacks: Map<String, Function>;
-    private callback2Id;
+    callback2Id(f: Function): string;
     private id2Callback;
     findViewByTag(tag: string): View | undefined;
     constructor();

doric-js/lib/src/widget/image.d.ts

@@ -1,4 +1,4 @@
-import { View } from "../ui/view";
+import { View, NativeViewModel } from "../ui/view";
 import { Color } from "../util/color";
 import { BridgeContext } from "../runtime/global";
 import { Resource } from "../util/resource";
@@ -95,5 +95,11 @@ export declare class Image extends View {
         mimeType: string;
     }>;
     getImagePixels(context: BridgeContext): Promise<ArrayBuffer>;
+    setImagePixels(context: BridgeContext, imagePixels: {
+        width: number;
+        height: number;
+        pixels: ArrayBuffer;
+    }): Promise<void>;
+    toModel(): NativeViewModel;
 }
 export declare function image(config: Partial<Image>): Image;

doric-js/lib/src/widget/image.js

@@ -48,6 +48,25 @@ export class Image extends View {
     getImagePixels(context) {
         return this.nativeChannel(context, "getImagePixels")();
     }
+    setImagePixels(context, imagePixels) {
+        if (Environment.platform === 'iOS') {
+            imagePixels.pixels = context.function2Id(() => {
+                return imagePixels.pixels;
+            });
+        }
+        return this.nativeChannel(context, "setImagePixels")(imagePixels);
+    }
+    toModel() {
+        const ret = super.toModel();
+        if (Environment.platform === 'iOS') {
+            if (Reflect.has(ret.props, "imagePixels")) {
+                const imagePixels = Reflect.get(ret.props, "imagePixels");
+                const pixels = imagePixels.pixels;
+                imagePixels.pixels = this.callback2Id(() => pixels);
+            }
+        }
+        return ret;
+    }
 }
 __decorate([
     Property,

doric-js/src/ui/view.es5.ts

@@ -144,7 +144,8 @@ export abstract class View implements Modeling {
     superview?: Superview
 
     callbacks!: Map<String, Function>
-    private callback2Id(f: Function) {
+
+    callback2Id(f: Function) {
         if (this.callbacks === undefined) {
             this.callbacks = new Map
         }

doric-js/src/ui/view.ts

@@ -129,7 +129,7 @@ export abstract class View implements Modeling {
 
     callbacks: Map<String, Function> = new Map
 
-    private callback2Id(f: Function) {
+    callback2Id(f: Function) {
         const id = uniqueId('Function')
         this.callbacks.set(id, f)
         return id

doric-js/src/widget/image.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { View, Property } from "../ui/view"
+import { View, Property, NativeViewModel } from "../ui/view"
 import { layoutConfig } from "../util/layoutconfig"
 import { Color } from "../util/color"
 import { BridgeContext } from "../runtime/global"
@@ -149,6 +149,34 @@ export class Image extends View {
     getImagePixels(context: BridgeContext): Promise<ArrayBuffer> {
         return this.nativeChannel(context, "getImagePixels")()
     }
+
+    setImagePixels(
+        context: BridgeContext,
+        imagePixels: {
+            width: number,
+            height: number,
+            pixels: ArrayBuffer
+        }): Promise<void> {
+        if (Environment.platform === 'iOS') {
+            (imagePixels.pixels as unknown as any) = context.function2Id(() => {
+                return imagePixels.pixels
+            })
+        }
+        return this.nativeChannel(context, "setImagePixels")(imagePixels)
+    }
+
+
+    toModel() {
+        const ret = super.toModel()
+        if (Environment.platform === 'iOS') {
+            if (Reflect.has(ret.props, "imagePixels")) {
+                const imagePixels = Reflect.get(ret.props, "imagePixels")
+                const pixels = imagePixels.pixels
+                imagePixels.pixels = this.callback2Id(() => pixels)
+            }
+        }
+        return ret
+    }
 }
 
 export function image(config: Partial<Image>) {

doric-web/dist/index.js

@@ -3328,6 +3328,25 @@ class Image extends View {
     getImagePixels(context) {
         return this.nativeChannel(context, "getImagePixels")();
     }
+    setImagePixels(context, imagePixels) {
+        if (Environment.platform === 'iOS') {
+            imagePixels.pixels = context.function2Id(() => {
+                return imagePixels.pixels;
+            });
+        }
+        return this.nativeChannel(context, "setImagePixels")(imagePixels);
+    }
+    toModel() {
+        const ret = super.toModel();
+        if (Environment.platform === 'iOS') {
+            if (Reflect.has(ret.props, "imagePixels")) {
+                const imagePixels = Reflect.get(ret.props, "imagePixels");
+                const pixels = imagePixels.pixels;
+                imagePixels.pixels = this.callback2Id(() => pixels);
+            }
+        }
+        return ret;
+    }
 }
 __decorate$b([
     Property,