alexk111 / ngImgCrop

Image Crop directive for AngularJS (THIS PROJECT IS NOT MAINTAINED ANYMORE)
MIT License
1.12k stars 515 forks source link

file size does not get smaller -- file: Upload.dataUrltoBlob(dataUrl, picFile.name) -- #129

Open philipfwilson opened 8 years ago

philipfwilson commented 8 years ago

http://stackoverflow.com/questions/35705753/image-file-size-does-not-get-smaller-data-file-upload-dataurltoblobdataurl

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

https://github.com/alexk111/ngImgCrop

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>

I noticed that the file is zooming in on what is selected with

data: { file: Upload.dataUrltoBlob(dataUrl, picFile.name) }, Main issue here is:

=====>> the file size does not get smaller from the original size.

Second issue here is:

=====>> Gimp gives me an error.

GIMP Message: Opening /Users/testUser/test_hold_files/ failed: raw image plug-In could not open image

After I write the file out with the following it works in chrome but I can't open the file in 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!")
            }
        });
    });
});

Any help is great.

Thanks

philipfwilson commented 8 years ago

Anyone running into the same issue?