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}仅提供不是Node Engine /浏览器的JavaScript运行时，因此，如果您的库依赖于Node / Browser特定的任何api，它将无法在{N}环境中使用。您将必须找到相同的本机等效物。

还有nativescript-nodeify仅实现了有限的节点api集，例如文件，流等。

要缓冲的Nativescript图像以与充满活力的节点模块一起使用

编辑并明确保存文件：

问题

1 个答案: