Javascript NgImgCrop net::ERR\u无效\u URL但有效URI

Javascript NgImgCrop net::ERR\u无效\u URL但有效URI,javascript,jquery,angularjs,image,Javascript,Jquery,Angularjs,Image,我正在使用这个插件: 裁剪后,我将图像作为base64 URI图像上传到数据库中。 (我知道这不是最好的方法,但它是最简单的,我已经尝试只保存路径,但它涉及到许多其他功能) 然后,我想直接显示来自此URI的图像,并得到以下错误: jquery.js:4380 GET data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQ…XgEqi9EedtfVj2wSuh70q2NjrCzAfaJLRsS37Cgn

我正在使用这个插件:

裁剪后,我将图像作为base64 URI图像上传到数据库中。 (我知道这不是最好的方法,但它是最简单的,我已经尝试只保存路径,但它涉及到许多其他功能)

然后,我想直接显示来自此URI的图像,并得到以下错误:

jquery.js:4380 GET data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQ…XgEqi9EedtfVj2wSuh70q2NjrCzAfaJLRsS37CgnNscsuYb+oMZJNRFnx3KnWINRP6GbxzWaFJ net::ERR_INVALID_URL   
问题是这个URI是有效的。当我复制链接地址并在webservice base64图像转换器中打印时,它工作正常

以下是渲染前的html元素:

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

以下是渲染后的html元素:

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

显然,添加attribute src而不是只管理ng src,我认为这是错误的原因,但是编辑插件几乎是不可能的


您是否有更好的想法或一段代码可以告诉我如何简单地裁剪图像并将其作为图像的路径上传到服务器端(顺便说一句,我使用的是CakePHP)。

通过将URI转换为图像,将图像保存到服务器,然后将路径保存到数据库来解决此问题。希望它能帮助有需要的人

下面是ArtistsEdit.js中与API(AngularJs)通信所需的一些代码

下面是ArtistsController.php中转换和保存图像所需的一些代码(CakePHP)

/!\别忘了“sudo chmod-R 777 img”/\