Изображение Nativescript для буфера для использования с Node Module Vibrant

Question

Я использую native_script camera module. Я могу взять изображение, которое сохраняется в моей галерее, я могу отобразить его в HTML, но я не понимаю, как использовать изображение с модулем узла vibrant. Код протестирован на Iphone 6s (реальное устройство, без симулятора).

import { Component, OnInit } from '@angular/core';
require("nativescript-nodeify")
const Vibrant = require('node-vibrant');
import * as camera from "nativescript-camera";
import * as  imageModule from "ui/image";


@Component({
  selector: 'ns-snapshot',
  templateUrl: './snapshot.component.html',
  styleUrls: ['./snapshot.component.css'],
  moduleId: module.id,
})
export class SnapshotComponent implements OnInit {
    result: string;
    image: null;

    constructor() { }

    ngOnInit() {
          console.log("checking camera")
          camera.requestPermissions() // works
    }


    getColor(imgSrc) {
        console.log("Analyzing color");
        Vibrant.from(imgSrc).getPalette((err, palette) => { // failing complains that imgSrc is not a valid HTMLImageElement
              console.log("err", err);
              console.log("palette", palette);
              this.result = palette.toString();

        })
    }
    takeSnapshot() {
          console.log("taking snapshot")
          camera.takePicture()
              .then( (imageAsset) => {
                  console.log("Result is an image asset instance"); // works
                  console.log("imageAsset", imageAsset)
                  this.image = new imageModule.Image();
                  this.image.src = imageAsset;
                  console.log("image.src", this.image);
                  console.log("image.srcII", this.image.src);
                  console.log("image.srcIII", this.image.src.ios);
                  this.getColor(this.image.src);
              }).catch( (err) => {
              console.log("Error -> " + err.message);
          });
    }

}

Логи:

CONSOLE LOG file:///app/app/snapshot/snapshot.component.js:61:24: image.src Image(14)
CONSOLE LOG file:///app/app/snapshot/snapshot.component.js:63:28: image.srcII {
"_observers": {},
"_options": {
"keepAspectRatio": true
},
"_ios": {}
}
CONSOLE LOG file:///app/app/snapshot/snapshot.component.js:65:32: image.srcIII <PHAsset: 0x11fef9300> ADFBE7B0-7A38-4F12-8390-0D77D72709D0/L0/001 mediaType=1/0, sourceType=1, (3024x4032), creationDate=2018-11-05 08:56:25 +0000, location=0, hidden=0, favorite=0
CONSOLE LOG file:///app/app/snapshot/snapshot.component.js:45:20: Analyzing color with test
CONSOLE LOG file:///app/app/snapshot/snapshot.component.js:69:24: Error -> Can't find variable: HTMLImageElement

Я также пытался передать this.image, потому что он похож на HTMLImageElement

РЕДАКТИРОВАТЬ с явным сохранением файла:

import { fromAsset } from "image-source";
import { knownFolders, path } from "file-system"

....

camera.takePicture()
    .then( (imageAsset) => {
       console.log("Result is an image asset instance");
       console.log("imageAsset", imageAsset);
       this.image = new imageModule.Image();
       this.image.src = imageAsset;
       fromAsset(imageAsset)
           .then((imageSource) => {
                const folder = knownFolders.temp();
                const filePath = path.join(folder.path, "test" + ".png");
                console.log('saving to', filePath)
                if (imageSource.saveToFile(filePath, "png", 90)) {
                       this.getColor(filePath);
                }
});

Вопрос

Вопрос, как передать путь / преобразовать изображение в буфер так, чтобы живой мог его обработать?

Answer 1

То, что вы получаете от плагина камеры, это не файл, а актив изображения. Вам нужно будет записать его в файл, а затем передать в Vibrant.

import { fromAsset } from "image-source";

fromAsset(imageAsset)
  .then((imageSource) => {
    if (imageSource.saveToFile(YourFilePath, "jpg", 90)) {
      Vibrant.from(YourFilePath)...
      ....
      ....
    }
  });

Между тем, {N} просто предоставляет среду выполнения JavaScript, которая не является Node Engine / Browser, поэтому, если ваши библиотеки зависят от какого-либо конкретного API Node / Browser, он не будет работать в среде {N}. Вам придется найти собственный эквивалент того же самого.

Существует также nativescript-nodeify , который реализует только ограниченный набор apis-узлов, таких как файл, поток и т. Д.,