【发布时间】:2020-03-03 09:33:01
【问题描述】:
我正在使用带有 Angular 的 Nativescript,并且有一个页面,我可以在其中拍摄收据或从图库中添加,并添加几个文本输入并发送到服务器。
从库中添加在 Android 中运行良好,但在 iOS 中却不行。
这是模板代码:
<Image *ngIf="imageSrc" [src]="imageSrc" [width]="previewSize" [height]="previewSize" stretch="aspectFit"></Image>
<Button text="Pick from Gallery" (tap)="onSelectGalleryTap()" class="btn-outline btn-photo"> </Button>
和组件:
public onSelectGalleryTap() {
let context = imagepicker.create({
mode: "single"
});
let that = this;
context
.authorize()
.then(() => {
that.imageAssets = [];
that.imageSrc = null;
return context.present();
})
.then((selection) => {
alert("Selection done: " + JSON.stringify(selection));
that.imageSrc = selection.length > 0 ? selection[0] : null;
// convert ImageAsset to ImageSource
fromAsset(that.imageSrc).then(res => {
var myImageSource = res;
var base64 = myImageSource.toBase64String("jpeg", 20);
this.expense.receipt_data=base64;
})
that.cameraImage=null;
that.imageAssets = selection;
that.galleryProvided=true;
// set the images to be loaded from the assets with optimal sizes (optimize memory usage)
selection.forEach(function (element) {
element.options.width = that.previewSize;
element.options.height = that.previewSize;
});
}).catch(function (e) {
console.log(e);
});
}
下面我贴了Android和iOS的截图行:
alert("Selection done: " + JSON.stringify(selection));
在 Android 中,文件系统中存在图像位置的路径,但在 iOS 中,我希望在其中看到路径,然后返回消息“无法保存图像” " 虽然图像预览显示在图像页面上。
以下是截图:
安卓:
iOS:
任何想法为什么它在 iOS 中失败?
谢谢
===========
更新
我现在将图像保存到一个临时位置,但它仍然无法在 iOS 中运行。它适用于安卓系统。
这是我的代码。
import { ImageAsset } from 'tns-core-modules/image-asset';
import { ImageSource, fromAsset, fromFile } from 'tns-core-modules/image-source';
import * as fileSystem from "tns-core-modules/file-system";
...
...
public onSelectGalleryTap() {
alert("in onSelectGalleryTap");
var milliseconds=(new Date).getTime();
let context = imagepicker.create({
mode: "single"
});
let that = this;
context
.authorize()
.then(() => {
that.imageAssets = [];
that.previewSrc = null;
that.imageSrc = null;
return context.present();
})
.then((selection) => {
that.imageSrc = selection.length > 0 ? selection[0] : null;
// convert ImageAsset to ImageSource
fromAsset(that.imageSrc)
.then(res => {
var myImageSource = res;
let folder=fileSystem.knownFolders.documents();
var path=fileSystem.path.join(folder.path, milliseconds+".jpg");
var saved=myImageSource.saveToFile(path, "jpg");
that.previewSrc=path;
const imageFromLocalFile: ImageSource = <ImageSource> fromFile(path);
var base64 = imageFromLocalFile.toBase64String("jpeg", 20);
this.expense.receipt_data=base64;
})
that.cameraImage=null;
that.imageAssets = selection;
that.galleryProvided=true;
// set the images to be loaded from the assets with optimal sizes (optimize memory usage)
selection.forEach(function (element) {
element.options.width = that.previewSize;
element.options.height = that.previewSize;
});
}).catch(function (e) {
console.log(e);
});
}
有什么想法吗?谢谢。
【问题讨论】:
-
这实际上不是问题,iOS 在这里的工作方式完全不同。它不会返回原始图像的路径,而只会返回 PHAsset 实例。如果您以后想通过路径访问它,则必须将图像写入本地文件夹。
-
@Manoj 图像预览显示在表单中。我们只是想将其从本地存储发送到服务器?
-
图片预览显示它来自PHAsset,你可以查看源代码。图像视图可以使用在 iOS 中不包含原始图像路径而仅包含二进制数据的图像资产。您必须将数据写入应用的存储空间以创建文件路径。
-
我在“更新”部分使用您问题中的代码解决了我的问题!
标签: nativescript angular2-nativescript imagepicker