NgImgCrop net :: ERR_INVALID_URL但有效的URI

Question

我正在使用這個插件： https : //github.com/alexk111/ngImgCrop

裁剪后，我將圖像作為base64 URI圖像上傳到數據庫中。 （我知道這不是最好的方法，但這是最簡單的方法，我已經嘗試過僅保存路徑，但是它涉及許多其他功能）

然后，我想直接從該URI顯示圖像，並且出現以下錯誤：

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

問題是此URI有效。 復制鏈接地址並將其打印在諸如http://www.askapache.com/online-tools/base64-image-converter/之類的webservice base64-image-converter中時，它工作正常！

這是渲染之前的html元素：

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

這是渲染后的html元素：

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

顯然NgImgCrop添加屬性src而不是僅管理ng-src，我認為這是導致錯誤的原因，但是幾乎無法編輯插件...

您是否有更好的主意或一段代碼，可以向我展示如何裁剪圖像並將其上傳到服務器端作為圖像的路徑（我正在使用CakePHP）。

Answer 1

通過將URI轉換為圖像，將圖像保存到服務器然后保存到數據庫的路徑來解決問題。 希望它可以幫助有需要的人。

這是來自ArtistsEdit.js的一些與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);
        });

這是來自ArtistsController.php的一些代碼，用於轉換和保存圖像（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'));
    }

/！\\不要忘記'sudo chmod -R 777 img'/！\\