图像文件大小没有变小 - 数据文件：Upload.dataUrltoBlob(dataUrl, picFile.name) - ng-imp-crop ng-file-upload

Question

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

Angularjs side:

    <div class="form-group">
      <div class="signup-profile-row-96">

          <div>Crop Image and Upload</div>
          <button class="row-left btn btn-primary" ngf-select ng-model="picFile" accept="image/*">
            Select Picture</button>
          <div ngf-drop ng-model="picFile" ngf-pattern="image/*"
               class="cropArea">
            <img-crop image="picFile  | ngfDataUrl"
                      result-image="croppedDataUrl" ng-init="croppedDataUrl=''">
            </img-crop>
          </div>
          <div><br/>
            <img ng-src="{{croppedDataUrl}}" />
          </div><br/>
          <button class="row-left btn btn-primary" ng-click="upload(croppedDataUrl, picFile)">Submit</button>
              <span class="progress" ng-show="progress >= 0">
                <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
              </span>
          <span ng-show="result">Upload Successful</span>
          <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
       </div>
    </div>

我注意到文件正在放大使用

选择的内容

data: { file: Upload.dataUrltoBlob(dataUrl, picFile.name) },

这里的主要问题是：

=====>> 文件大小并没有变小

这里的第二期是：

=====>> Gimp 给我一个错误。

GIMP 消息：打开 /Users/testUser/test_hold_files/ 失败：原始图像插件无法打开图像

在我用以下命令写出文件后，它在 chrome 中工作，但我无法在 gimp 中打开文件。

// Post files

router.post('/user/uploads', function (req, res){
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        res.end(util.inspect({fields: fields, files: files}));
    });

    form.on('end', function(fields, files) {
        /* Temporary location of our uploaded file */
        var temp_path = this.openedFiles[0].path;
        /* The file name of the uploaded file */
        var file_name = this.openedFiles[0].name;
        /* Location where we want to copy the uploaded file */
        var new_location = "/Users/testUser/test_hold_files/";

        fs_extra.copy(temp_path, new_location + file_name, function(err) {
            if (err) {
                console.error(err);
            } else {
                console.log("success!")
            }
        });
    });
});

任何帮助都很棒。

谢谢

Answer 1

好的，我找到了问题的答案。

Angular边。

            <div class="form-group">
              <div class="signup-profile-row-96">

                  <div>Crop Image and Upload</div>
                  <button class="row-left btn btn-primary" ngf-select ng-model="picFile" accept="image/*">
                    Select Picture</button>
                  <div ngf-drop ng-model="picFile" ngf-pattern="image/*"
                       class="cropArea">
                    <img-crop image="picFile  | ngfDataUrl"
                              result-image="croppedDataUrl"
                              result-image-quality="0.4"
                              result-image-size="450"
                              result-image-format="image/jpeg"
                              ng-init="croppedDataUrl=''">
                    </img-crop>
                  </div>
                  <div><br/>
                    <img ng-src="{{croppedDataUrl}}" />
                  </div><br/>
                  <button class="row-left btn btn-primary" ng-click="upload(croppedDataUrl, picFile)">Submit</button>
                      <span class="progress" ng-show="progress >= 0">
                        <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
                      </span>
                  <span ng-show="result">Upload Successful</span>
                  <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
               </div>
            </div>

图像文件大小没有变小 - 数据文件：Upload.dataUrltoBlob(dataUrl, picFile.name) - ng-imp-crop ng-file-upload

image file size does not get smaller - data file: Upload.dataUrltoBlob(dataUrl, picFile.name) - ng-imp-crop ng-file-upload

node.js

angularjs

ng-file-upload