Nativescript：无法分配1553380字节分配

Question

我正在使用带有Angular的Nativescript，应用程序的对象是拍照，然后通过电子邮件发送。
我正在使用此GridView向用户显示捕获的图像，如下图所示：

现在您可以看到这是虚拟模拟器并且应用程序正常工作但是当我在第三张图片后在真实设备上尝试该应用时出现此错误：

System.err: com.tns.NativeScriptException: 
System.err: Calling js method onBindViewHolder failed
System.err: Error: java.lang.OutOfMemoryError: Failed to allocate a 1553380 byte allocation with 57537 free bytes and 56KB until OOM

我正在使用数据绑定来绑定GridView中的照片数组，如代码所述：

takePicture(){
        camera.takePicture()
            .then((imageAsset) => {
                console.log('Result is an image asset instance');
                // convert ImageAsset to ImageSource
                fromAsset(imageAsset)
                    .then(res => {
                        let base64 = res.toBase64String('png');
                        let newImage = 'data:image/png;base64,'+base64;
                        this.photos.push(newImage);// I get the base64 of the picture and save it in the array
                    })
            })
    }

这就是我在GridView：

中绑定数组的方式

<GridView [items]="photos" colWidth="30%" rowHeight="100">
            <ng-template let-item="item" let-odd="odd">
                <StackLayout margin="5" borderColor="gray" borderWidth="1" borderRadius="5" verticalAlignment="stretch" class="list-group-item">
                    <Image [src]="item" ></Image>
                </StackLayout>
            </ng-template>
        </GridView>

正如我所说，无论我拍多少张照片，该应用程序在模拟器上都能正常工作，但在使用真实设备时，我会在第三张照片后出现此错误。
这种行为有什么解释？

Answer 1

我没有使用相机插件，但我认为我的代码存在一些问题。

1. 你拍照并获得资产。
2. 您从中加载图像源时。
3. 然后将此图像源解码为base64并添加到数组中。
4. 然后将此base64用于src参数的角度模板。

base64编码是一个非常庞大的字符串，因此需要大量内存，并且可能比最大字符串长度更长。

当您只需将图片加载到模板中时，您就可以加载，编码和解码图像。

请改为尝试：

1. 将imageAsset推送到照片数组
2. 使用模板中的imageAsset