Base64 编码图像未在 Cordova 中显示

Question

将图像作为 Base64 数据添加到我的视图中不适用于此图像选择器。

我在我的 Cordova 应用程序中使用 Ionic 和 angular。科尔多瓦应用程序是用人行横道构建的。在我的应用程序中，您可以将图像添加到对象。这可以通过相机或图像选择器来完成。

相机返回 base64 编码的图像数据，可以正常工作，但是图像选择器不能。

imagepicker 是原始文件的一个分支，因此它返回 base64 编码数据而不是文件 uri。插件返回的图片数据示例见here。

问题是，当我将图像提交到服务器（以 base64 格式）并检索它（服务器解码图像数据，然后存储在文件中，然后再次以 base64 格式返回数据）时，图像工作正常。这可以在不刷新页面的情况下完成。

返回数据的方法（也许这会以cordova无法处理的方式返回base64？）

public void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (resultCode == Activity.RESULT_OK && data != null) {
        ArrayList<String> fileNames = data.getStringArrayListExtra("MULTIPLEFILENAMES");

        ArrayList<String> encodedImages = new ArrayList<String>();
        for(String fileName : fileNames) {
          try {
            Uri fileUri = Uri.parse(fileName);
            InputStream inputStream = new FileInputStream(fileUri.getPath());
            byte[] bytes;
            byte[] buffer = new byte[20000000]; //byte[8192]
            int bytesRead;
            ByteArrayOutputStream output = new ByteArrayOutputStream();
            try {
              while ((bytesRead = inputStream.read(buffer)) != -1) {
                output.write(buffer, 0, bytesRead);
              }
            } catch (IOException e) {
              e.printStackTrace();
            }
            bytes = output.toByteArray();

            String encodedString = Base64.encodeToString(bytes, Base64.NO_WRAP);
            encodedImages.add(encodedString);
          } catch(FileNotFoundException fnfe) {
          }
        }

        JSONArray res = new JSONArray(encodedImages);
        this.callbackContext.success(res);
    } else if (resultCode == Activity.RESULT_CANCELED) {
        JSONArray res = new JSONArray();
        this.callbackContext.success(res);
    } else {
        this.callbackContext.error("No images selected");
    }

}

照片视图（部分，包含 ng-include），其他图像效果很好，所以这可能没问题。

<ion-scroll direction="x" scrollbar-y="false" has-bouncing="true">
<div style="width: {{(vehicle.photos().length * 212) + 250}}px;" class="padding">
    <button class="button icon ion-ios7-plus-outline button-outline button-positive button-large" style="width: 200px; height: 200px;" ng-click="galleryCameraDialog()"></button>
        <img  ng-repeat="image in vehicle.photos()" style="margin-right: 5px; background-image: url(data:{{images[image].filetype()}};base64,{{images[image].data()}});background-repeat: no-repeat; background-position: center center; background-size: cover;" height="200" width="200" ng-click="removeDialog(image)">
</div></ion-scroll>

如果需要，请索取更多信息，结构相当复杂。

Answer 1

你为什么要发送JsonArray，你可以在success方法中直接发送图片字符串。