イメージのパスではなく画像のイメージをmongodbに保存する[解決済み：ソリューションの解決方法を見てください]

Question

これで多くの質問と解決方法が見受けられました。私はMongo DBとMEANのスタック開発には初めてです。私は、イメージファイルのパスではなく、イメージコンテンツ自体をMongo DBに格納する方法があるかどうかを知りたい。すべてのソリューションは、イメージをバッファとして保存し、バッファをbase64に変換することでソースに戻すことを提案しています。私はそれをしましたが、結果の出力はイメージコンテンツではなくイメージファイルへのパスに解決されます。私はDBに画像そのものを保存しようとしています。どんな助けもありがとう。

// saving image 
var pic = {name : "profilePicture.png", 
      img : "images/default-profile-pic.png", 
      contentType : "image/png" 
      }; 

//schema 
profilePic:{ name: String, img: Buffer, contentType: String } 

//retrieving back 
var base64 = ""; 
var bytes = new Uint8Array(profilePic.img.data); 
var len = bytes.byteLength; 
for (var i = 0; i < len; i++) { 
    base64 += String.fromCharCode(bytes[ i ]); 
} 

var proPic = "data:image/png;base64," + base64; 
console.log(proPic); 

//console output 
data:image/png;base64,images/default-profile-pic.png 

proPicのための出力がに解決 "データ：画像/ PNG; base64で、画像/デフォルトプロファイル-pic.png" 私はこの

How to do Base64 encoding in node.js?

を投稿する前に呼ば

いくつかのリンクを

How to convert image into base64 string using javascript

Answer 1

問題は、あなたが読んで絵をコードしていないことを、単にです。代わりにパスを文字列として使用します。ノード

を使用して

サーバーサイドあなたがファイルシステム上の画像をサーバー側でそれを実行したい場合は、次のように沿って何かを使用することができます。

我々はロードする必要が再び

var fs = require('fs'); 

// read and convert the file 
var bitmap = fs.readFileSync("images/default-profile-pic.png"); 
var encImage = new Buffer(bitmap).toString('base64'); 

// saving image 
var pic = {name : "profilePicture.png", 
      img : encImage, 
      contentType : "image/png" 
      }; 
.... 

クライアント側

をイメージをbase64としてエンコードします。クライアントhereでこれを行うことに関する回答があります。

結果は以下のようなものになるだろう最初のアプローチを使用して：

function toDataUrl(url, callback, outputFormat){ 
    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function(){ 
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 
     callback(dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
} 

toDataUrl("images/default-profile-pic.png", function(encImage){ 
    // saving image 
    var pic = {name : "profilePicture.png", 
       img : encImage, 
       contentType : "image/png" 
       }; 
    //Proceed in the callback or use a method to pull out the data 
    .... 
}); 

Answer 2

2以下のリンクは、私の時間を救いました。 "ng-file-upload"を使用すると、私たちの人生はそこから簡単になります。以下は

https://github.com/danialfarid/ng-file-upload

https://github.com/danialfarid/ng-file-upload#install

は私のために働いていたものです

//my html code 

<div> 
    <button type="file" ngf-select="onFileSelect($file)" ng-model="file" name="file" ngf-pattern="'image/*'" 
    ngf-accept="'image/*'" ngf-max-size="15MB" class="btn btn-danger"> 
    Edit Profile Picture</button> 
</div> 

//my js function 
     function onFileSelect(file){ 
     //var image = document.getElementById('uploadPic').files; 
     image = file; 

     if (image.type !== 'image/png' && image.type !== 'image/jpeg') { 
      alert('Only PNG and JPEG are accepted.'); 
      return; 
     } 

     $scope.uploadInProgress = true; 
     $scope.uploadProgress = 0; 

     var reader = new window.FileReader(); 
     reader.readAsDataURL(image); 
     reader.onloadend = function() { 
      base64data = reader.result; 

      $scope.profile.profilePic = base64data; 

      ProfileService.updateProfile($scope.profile).then(function(response){ 
       $rootScope.profile = response; 
       $scope.profilePicture = $rootScope.profile.profilePic; 

      }); 

     } 

    } 

// when reading from the server just put the profile.profilePic value to src 
src="data:image/png;base64,{base64 string}" 

// profile schema 
var ProfileSchema = new mongoose.Schema({ 
    userid:String, 
    //profilePic:{ name: String, img: Buffer, contentType: String }, 
    profilePic:String 
} 

私はこれが最善の解決策が、これはアップロードするからあなたを制限start.Alsoするのに適した場所であると言うではないでしょうファイルサイズが16 MB以上の場合は、最初に上記の実装で "GridFs"を使用することができます。ファイルは "blob"に変換され、 "base64"形式に変換され、プロファイルの文字列variablに追加されますe。

これは、時間を節約するのに役立ちます。