Serverside使用Node

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的输出解析为＆＃34; data：image / png; base64，images / default-profile-pic.png＆＃34;

在发布此

之前我提到过的几个链接

How to do Base64 encoding in node.js?

How to convert image into base64 string using javascript

Answer 1

问题很简单，你不会读取和编码图片。而是将路径用作字符串。

Serverside使用Node

如果您想在服务器端使用文件系统上的图像执行它，您可以使用以下内容：

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

以下两个链接节省了我的时间。如果我们使用“ ng-file-upload ”，那么我们的生活就变得轻松了。

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

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

以下是对我有用的东西

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

我不会说这是最好的解决方案，但是一个好的起点。这也限制了你上传文件大小超过16 MB的情况，在这种情况下你可以在上面的实现中使用“GridFs”，最初文件被转换到“blob”，然后我将其转换为“base64”格式并将其添加到我的配置文件的字符串变量。

希望这有助于节省时间。

在mongodb中存储图像内容而不是图像路径

2 个答案:

Serverside使用Node

客户机侧