javascript - Base64 字符串不完整

Question

我有这个 fragment ，它从相机捕获照片并将其输出为 base64 字符串。

function onPhotoDataSuccess(imageData) {
  console.log("Image Data: "+imageData);

  var smallImage = document.getElementById('smallImage');
  smallImage.style.display = 'block';

  smallImage.src = "data:image/jpeg;base64," + imageData;
  console.log("Src:" + smallImage.src);
}

当我查看控制台日志时，第一个日志Image Data不完整，但第二个 Src日志更长。

这是 Image Data 的日志:

09-18 17:00:24.591: D/CordovaLog(12097):
file:///android_asset/www/upload.html: Line 57 :
Image Data: /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkz

对于 Src我得到(你也可以解码它，没什么有趣的):

09-18 17:00:24.630: D/CordovaLog(12097):
file:///android_asset/www/upload.html: Line 71 :
Src:data:image/jpeg;base64,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

使用相同的变量imageData可以看到在两个日志中，我无法得到相同的结果。并且，如果您解码Src中的base64字符串，图像不完整。

有人知道如何解决这个问题吗？

编辑:jsfiddle显示base64的解码

编辑:<img> HTML 正文中的标记:

<img style="display:none;width:300px" id="smallImage" src="" />

Answer 1

我建议您使用目标类型作为FILE_URI并通过下面描述的方法获取base64

将目标类型设置为 FILEe-URI 是推荐的方法，您可以在他们的文档中看到它

http://docs.phonegap.com/en/2.5.0/cordova_camera_camera.md.html

将目标类型指定为 FILE_URI 本身，在 imagedata 中，您将获取图像文件 uri 将其放入图像标记中，然后将其放入 HTML5 canvas 中，并且 canvas 有一个名为 toDataURL 的方法，您可以在其中使用能够获取对应图片的base64。

检查下面的代码

function onPhotoDataSuccess(imageData)
     {

                var $img = $('<img/>');
                $img.attr('src', imageData);
                $img.css({position: 'absolute', left: '0px', top: '-999999em', maxWidth: 'none', width: 'auto', height: 'auto'});
                $img.bind('load', function() 
                {
                    var canvas = document.createElement("canvas");
                    canvas.width = $img.width();
                    canvas.height = $img.height();
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage($img[0], 0, 0);
                    var dataUri = canvas.toDataURL('image/png');

                });
                $img.bind('error', function() 
                {
                    console.log('Couldnt convert photo to data URI');
                });

    }