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是有效的。当我复制链接地址并将其打印在web服务base64-image-converter（如http://www.askapache.com/online-tools/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只添加attribut 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'));
    }

/！\别忘了＆＃39; sudo chmod -R 777 img＆＃39; /！\

NgImgCrop net :: ERR_INVALID_URL但有效的URI

1 个答案: