Base64编码的图像未显示在Cordova中

时间:2015-01-09 09:40:34

标签: java javascript angularjs ionic-framework cordova-plugins

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

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

相机返回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");
    }

}

foto视图(部分,包含在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>

如果需要,请提供更多信息,结构相当复杂。

1 个答案:

答案 0 :(得分:0)

为什么要发送JsonArray,你可以直接发送成功方法中的图像字符串。