mongoDB 中保存的图像分辨率不佳

Question

所以我刚刚使用 ng-file-upload 上传图像文件并使用 express 将其保存到 mongoDB。但是图像 returns 完全缩小和像素化。我可以调整什么来存储全尺寸图像？

Angular

$scope.upload = function (file) {
        Upload.upload({
            url: 'upload/image/' + $scope.device._id,
            data: {file: file}
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };

    $scope.showImage = function base64ArrayBuffer(arrayBuffer) {
      var base64    = ''
      var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

      var bytes         = new Uint8Array(arrayBuffer)
      var byteLength    = bytes.byteLength
      var byteRemainder = byteLength % 3
      var mainLength    = byteLength - byteRemainder

      var a, b, c, d
      var chunk

      // Main loop deals with bytes in chunks of 3
      for (var i = 0; i < mainLength; i = i + 3) {
        // Combine the three bytes into a single integer
        chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]

        // Use bitmasks to extract 6-bit segments from the triplet
        a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
        b = (chunk & 258048)   >> 12 // 258048   = (2^6 - 1) << 12
        c = (chunk & 4032)     >>  6 // 4032     = (2^6 - 1) << 6
        d = chunk & 63               // 63       = 2^6 - 1

        // Convert the raw binary segments to the appropriate ASCII encoding
        base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
      }

      // Deal with the remaining bytes and padding
      if (byteRemainder == 1) {
        chunk = bytes[mainLength]

        a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2

        // Set the 4 least significant bits to zero
        b = (chunk & 3)   << 4 // 3   = 2^2 - 1

        base64 += encodings[a] + encodings[b] + '=='
      } else if (byteRemainder == 2) {
        chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]

        a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
        b = (chunk & 1008)  >>  4 // 1008  = (2^6 - 1) << 4

        // Set the 2 least significant bits to zero
        c = (chunk & 15)    <<  2 // 15    = 2^4 - 1

        base64 += encodings[a] + encodings[b] + encodings[c] + '='
      }

      return base64
    };

查看

<form name="form">
              <div class="btn btn-default" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
                ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
                ngf-resize="{width: 100, height: 100}">Upload Photo</div>


            </form>

            Image thumbnail: <img ngf-thumbnail="file || '/thumb.jpg'">

            <button class="btn btn-danger" ng-click="upload(file)">submit</button>

            <img ng-src="data:image/JPEG;base64,{{showImage(device.image.data.data)}}" width="200">

路线

app.route('/upload/image/:deviceId')
    .post(users.requiresLogin, devices.postImage);

服务器控制器

exports.postImage = function(req, res) {


var form = new multiparty.Form();
var device = req.device;

form.parse(req, function(err, fields, files) {
    var file = files.file[0];
    var contentType = file.headers['content-type'];
    var tmpPath = file.path;

    if (contentType !== 'image/png' && contentType !== 'image/jpeg') {
        fs.unlink(tmpPath);
        return res.status(400).send('Unsupported file type.');
    } else {

        var imgData = {
            image: {
                data: fs.readFileSync(tmpPath),
                contentType: contentType
            }
        };

        device = _.extend(device , imgData);

        device.save(function(err) {
            if (err) {
                return res.status(400).send({
                    message: errorHandler.getErrorMessage(err)
                });
            } else {
                res.jsonp(device);
            }
        });
    }

});

};

原图： origninal

上传质量 quality of uploaded

Answer 1

正在删除

ngf-resize="{width: 100, height: 100}"

没有降低质量 - 解决了！ :)

mongoDB 中保存的图像分辨率不佳

Bad resolution from saved image in mongoDB

mongodb

node.js

express

angularjs

ng-file-upload