Base64 encoded image not showing in Cordova

Question

Adding an image as Base64 data to my view does not work with this imagepicker.

I use Ionic with angular for my Cordova app. The cordova app is build with crosswalk. In my app you can add images to an object. This can be done with the camera or the image picker.

The camera returns base64 encoded image data which works fine, the image picker however does not.

The imagepicker is a fork on the original, so that it returns base64 encoded data instead of a file uri. An example of image data returned by the plugin can be found here .

The thing is, when I submit the image to the server (as base64) and retrieve it (the server decodes the image data, then stores is in a file, then returns the data as base64 again) the image works fine. And this can be done without page refresh.

The method that returns the data (maybe this returns base64 in a way cordova can't handle?)

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");
    }

}

The foto view (partial, ingluded with ng-include), Other images work well so this is probably fine.

<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>

Please request additional information if required, the structure is rather complex.

Answer 1

为什么要发送JsonArray，可以通过成功方法直接发送图像字符串。