Question

查看我的代码

<img src='data:image/png;base64,{{imgSrc}}'>

在我的控制器中

$scope.imgSrc = $scope.deviceDetail.imgSrc;

我从我的后端imgSrc得到这种类型的响应，它存储在mongodb中。

"�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0003 \u0000\u0000\u0002R\b\u0002\u0000\u0000\u0000��6A\u0000\u0000\u0000\u0006bKGD\u0000�\u0000�\u0000�����\u0000\u0000 \u0000IDATx���{xT���W x\u0000\u0006%$F�c F\t�\"�V��\u0000�P\u000f\b���xEъ��T�z@� \u0018�諀`�TJ�Z\u0015\t�\"R��@\u000b|H�h8\u0005\......"

现在我想从这些数据中获取png图像，我已经将这些数据尝试到了base64但仍未获得图像。请告诉我这里有什么问题？

Answer 1

您可以将图像转换为数据库64位。

Base64是一组代表的类似二进制文本编码方案通过将其转换为基数-64表示形式的ASCII字符串格式的二进制数据。

要使用cordova，ionic或phonegap将文件转换为base64（图像或任何其他类型的文件），我们只需要使用cordova文件插件和1只人眼。然后我们将使用FileReader使用readAsDataURL方法读取文件的内容。

/**
 * This function will handle the conversion from a file to base64 format
 *
 * @path string
 * @callback function receives as first parameter the content of the image
 */
function getFileContentAsBase64(path,callback){
    window.resolveLocalFileSystemURL(path, gotFile, fail);

    function fail(e) {
          alert('Cannot found requested file');
    }

    function gotFile(fileEntry) {
           fileEntry.file(function(file) {
              var reader = new FileReader();
              reader.onloadend = function(e) {
                   var content = this.result;
                   callback(content);
              };
              // The most important point, use the readAsDatURL Method from the file plugin
              reader.readAsDataURL(file);
           });
    }}

然后我们将使用它将本地图像转换为base64： var path =“file：//storage/0/downloads/myimage.png”;

// Convert image
getFileContentAsBase64(path,function(base64Image){
  //window.open(base64Image);
  console.log(base64Image); 
  // Then you'll be able to handle the myimage.png file as base64
});

请记住，您需要来自cordova的文件插件，阅读并了解如何在此处使用它。您可以将文件插件下载到在cordova CLI中执行的项目中：

cordova plugin add cordova-plugin-file

继续here

https://gist.github.com/HereChen/e173c64090bea2e2fa51

http://tutsheap.com/web/javascript/get-base64-image-url/

如何将png图像字符串数据转换为png？

1 个答案: