Question

我正在尝试保存从相机在线拍摄的图像。但是图像大小超过MB。

我遇到了decodeWidth和decodeHeight属性，但是没有了解它是如何工作的。通过这些属性可以缩小图像的大小。

<StackLayout>
    <Image src="" decodeWidth="400" decodeHeight="400" loadMode="async" />
    <Label text="With loadMode set to async the UI won't be blocked" 
     textWrap="true" />
</StackLayout>

在上传之前，我需要将图片尺寸减小到50像素或更小。如何实现这一目标。

我尝试过类似的操作，但是我没有保存图像。

 let ImageAsset = require('tns-core-modules/image-asset').ImageAsset;

  const asset = new ImageAsset("~/images/nature.jpg");
  asset.options = {
    width: 100,
    height: 100,
    keepAspectRatio: true
  };
  console.log(asset);

  const imageSourceModule = require("tns-core-modules/image-source");
  const fileSystemModule = require("tns-core-modules/file-system");
  const img = imageSourceModule.fromFile(asset._android);
  const folderRoot = fileSystemModule.knownFolders.documents();
  folderRoot._path = "/storage/emulated/0/";
  const folder = folderRoot.getFolder("AAAA/");
  const pathDest = fileSystemModule.path.join(folder._path, `sample.jpg`);

  const exists = fileSystemModule.File.exists(pathDest);

  if (exists == true) {
    const saved = img.saveToFile(pathDest, "jpg");
    if (saved) {
      console.log("Image saved successfully!");
    }
  } else {
    console.log("Image not saved successfully!");
  }

console 

JS: {
JS:   "_observers": {},
JS:   "_options": {
JS:     "width": 100,
JS:     "height": 100,
JS:     "keepAspectRatio": true
JS:   },
JS:   "_android": "/data/data/org.nativescript.cameraplus/files/app/images/nature.jpg"
JS: }
JS: Image not saved successfully!

Answer 1

decodeWidth / decodeHeight帮助在Image组件上加载较低分辨率的图像。

要获得调整后的图像，您可以执行类似的操作

import { ImageAsset } from 'tns-core-modules/image-asset';

const asset = new ImageAsset(path);
asset.options = {
  width: 100,
  height: 100,
  keepAspectRatio: true
};

您可以在图像资产上调用getImageAsync()以获取调整后的原始图像数据，也可以将其保存到文件中并上传。

更新：

要保存图像，请按以下方式使用图像源模块

imageSourceModule.fromAsset(asset)
 .then(img => img.saveToFile(pathDest, "jpg"));

是否可以通过decodeWidth和decodeHeight属性减小图像大小？

1 个答案: