Görüntü içeriğini görüntü yolunu mongodb'de saklamayın [çözüldü: çözüm için cevabıma bakın]

Question

Şu an için birçok soru ve çözüm gördüm. Mongo DB ve MEAN yığın geliştirme konusunda yeniyim. Mongo DB'deki görüntü dosyasının yolu yerine, resim içeriğinin saklanıp saklanmayacağını bilmek istiyorum. Tüm çözümler, görüntüyü arabellek olarak depolamayı ve arabelleği base64'e dönüştürerek kaynağında geri almayı önerir. Ben yaptım ama sonuçta elde edilen çıktı, görüntü içeriğinden ziyade görüntü dosyasına giden yolu çözüyor. Ben görüntüyü DB'de kaydetmeyi düşünüyorum. Herhangi bir yardım takdir edilecektir. Bu

How to do Base64 encoding in node.js?

göndermeden önce değinilen;: "base64, görüntü/default profilli-pic.png resim/png verileri"

birkaç bağlantı

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

propionamid için çıkış için giderir

How to convert image into base64 string using javascript

Answer 1

sorun okuyup resmini kodlamadığınızdan, basitçe. Bunun yerine yolu bir dize olarak kullanırsınız.

Eğer aşağıdaki boyunca bir şey kullanabilirsiniz dosya sistemi üzerinde bir görüntü ile serverside bunu gerçekleştirmek istiyorsanız Düğüm

kullanılarak

olan sunucu:

Yine yüklemeniz gerekir

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

clientside görüntü ve base64 olarak kodlayın. Bunu istemcide here üzerinde yapmakla ilgili bir cevap var.

sonuç aşağıdaki gibi bir şey olurdu ilk yaklaşım kullanarak:

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

iki Aşağıda bağlantılar zamanımı kurtardı. "ng-file-upload" kullanırsak hayatımız oradan kolaylaşır. Aşağıda

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

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

benim için çalıştı ne

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

bu en iyi çözüm ancak bu yükleme yapmanıza sınırlar start.Also için iyi bir yer olduğunu söyleyemem Dosya boyutu 16 MB'den fazla olan durumlarda yukarıdaki uygulamada "GridFs" i kullanabilmeniz için başlangıçta dosya "blob" a dönüştürülüyor ve daha sonra "base64" formatına dönüştürülüyor ve bunu profilimin string varyasyonuna ekliyorum. e.

Bu, birilerinin zamanlarını kurtarmasında yardımcı olmasını umarız.