NgImgCrop net::ERR_INVALID_URL but valid URI

Question

I'm using this plugin : https://github.com/alexk111/ngImgCrop

After a crop, I upload my image as a base64 URI image in my database. (I know it's not the best way to do it, but it's the easiest, I already tried to save only the path, but it involves to much other functions)

Then I want to display directly the image from this URI and I get the following error :

jquery.js:4380 GET data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQ…XgEqi9EedtfVj2wSuh70q2NjrCzAfaJLRsS37CgnNscsuYb+oMZJNRFnx3KnWINRP6GbxzWaFJ net::ERR_INVALID_URL   

The thing is this URI is valid. When I copy link address and I print it in a webservice base64-image-converter such as http://www.askapache.com/online-tools/base64-image-converter/ it works fine !

Here is my html element before the rendering :

<img ng-src="{{myCroppedImage}}" alt="img artiste">

Here is my html element after the rendering :

<img ng-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4Xmy915ct6XHlF3n[...]yZB5X7pp2aDQGlgSo4Vrzt5KURDcyJAiSoye98EnzrBE5lDQUNQAIEGhz+9Gpo8sGbxzWaFJ" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4Xmy915ct6XHlF3n[...]yZB5X7pp2aDQGlgSo4Vrzt5KURDcyJAiSoye98EnzrBE5lDQUNQAIEGhz+9Gpo8sGbxzWaFJ" alt="img artiste">

Obviously NgImgCrop add the attribut src instead of managing ng-src only, and I think it's the cause of the error, but it's nearly impossible to edit the plugin...

Do you have better idea or a piece of code which could show me how to simply crop an image and upload it on server side as a path to the image (I'm using CakePHP by the way).

Answer 1

Problem solved by converting the URI into an image, saving the image to the server then saving the path to the database. Hope it could help someone in the need.

Here is some code from ArtistsEdit.js needed to communicate with the API (AngularJs)

        $http({
            method : 'POST',
            url    : '/artists/edit.json',
            data   : $.param({
                  image: $scope.artist.image,
                  id: $scope.artist.id,
                  token: $scope.artist.token
           }),
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded'
            } 
        })
        .success(function(res, status, headers, config) {
            console.log(res);
            $location.path('/artists/view/' + $scope.artist.id);
            Success.create(res);
        })
        .error(function(res, status, headers, config) {
            console.log(res);
            Error.create(res);
        });

Here is some code from ArtistsController.php needed to convert and to save the image (CakePHP)

   if( isset($q['Artist']['image']) ){
        $base64_string = $q['Artist']['image'];
        $output_file = 'img/artists/'.$d['id'].'.jpeg';
        $q['Artist']['image'] = '/'.$output_file;
        $ifp = fopen($output_file, "wb"); 
        $data = explode(',', $base64_string);
        fwrite($ifp, base64_decode($data[1])); 
        fclose($ifp);
    }
    $this->Artist->id = $d['id'];
    if( !$this->Artist->save($q) ){
        throw new InternalErrorException(__('Artist not edited'));
    }

/!\\ Dont forget to 'sudo chmod -R 777 img' /!\\