- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 cropper js 和 laravel,我裁剪图像并将其放入 formdata 并通过 Jquery Ajax 将其发送到 Laravel Controller 。问题是我没有在 Controller 中获取数据。但只会得到一个错误。代码如下:
HTML
<button type="button" name="button" id="crop">Crop</button>
<img src="{{asset('public/img/img.jpg')}}" id="image" alt="" style="height: 500px;">
Jquery 和 Cropper Js 代码
<script src="{{asset('public/js/jquery.min.js')}}"></script>
<script src="{{asset('public/js/cropper.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
var ele = document.getElementById('image')
var cropper = new Cropper(ele);
$('#crop').on('click', function(){
var crop = cropper.getCroppedCanvas();
crop.toBlob(function(blob){
var formdata = new FormData();
console.log(blob);
formdata.append('croppedImage', blob);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax("{{url('crop/save')}}", {
method: "POST",
data: formdata,
enctype: 'multipart/form-data',
cache: false,
processData: false,
contentData: false,
success(data){
console.log(data);
},
error(data){
console.log(data);
},
});
});
});
});
</script>
Laravel 路由
Route::post('crop/save', 'CropperController@save');
Laravel Controller
public function save(Request $request){
$data = $request->croppedImage;
var_dump($data);
//Here I want to get image and upload it on the system
//But I cant Understand How
}
错误
<br />
<b>Warning</b>: Unknown: Input variables exceeded 1000. To increase the limit change max_input_vars in php.ini. in <b>Unknown</b> on line <b>0</b><br />
请指导我,如何以正确的方式完成此操作。提前致谢。问候,
最佳答案
您需要使用 blob 数据创建一个新图像并保存它。
首先,您需要获取图像的实际内容,即:data:image/png;base64,
或 data:image/jpeg;base64,
(您可以使用 blob 的第一部分获取扩展类型,以便稍后使用相同的扩展保存图像。)
这会做到这一点:
$base64Str = substr($data, strpos($data, ",")+1);
接下来,您需要按照 base64 对内容进行解码
$file = base64_decode($base64Str);
然后,指定保存新图像的路径。您可以使用随机生成器结合当前时间戳来为每个文件获取唯一的名称。
public function generateUniqueFileName($extension)
{
return md5(uniqid(rand(), true)) . '-' . md5(microtime()) . '.' $extension;
}
$fullPath = 'public/images/' . $this->generateUniqueFileName($extension);
最后就可以将图片存储到指定路径了:
Storage::put($fullPath, $file);
关于javascript - 如何在 laravel Controller 中通过 Cropper Js 接收图像 blob 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51198882/
我正在使用 Cropper 尝试从上传的图像中获取固定大小的裁剪。这个想法是,如果(如果需要)网站管理员将能够缩放并在无法更改的裁剪器中构建新图像。通过这种方式,所有被裁剪的图像大小完全相同。 除非用
我正在尝试在框尺寸小于允许的最小图像尺寸时实现自动调整大小或裁剪框,现在我做了这个: var cropper = document.getElementById('image_cropper').cr
我尝试了此教程 link 我的代码是 $("#teh").cropper(); 但是,它在 $("#teh").cropper(); 遇到错误 U
我正在做一个使用Cropper剪切图像的项目,我有这个错误这是我的代码,错误在handleCrop函数中,有人能帮我吗?:)。我尝试了代码中的内容,我希望得到一个你可以点击的按钮和你之前加载的图像,一
我正在做一个使用Cropper剪切图像的项目,我有这个错误这是我的代码,错误在handleCrop函数中,有人能帮我吗?:)。我尝试了代码中的内容,我希望得到一个你可以点击的按钮和你之前加载的图像,一
我正在使用cropper.js ( https://github.com/fengyuanchen/cropperjs ) 来操作图像,但我找不到以编程方式裁剪图像的方法。 我想要做的是在初始化裁剪器
如何使用来自 cropperjs 的数据使用 ImageMagick 执行调整大小和裁剪? 用户可以上传大图像并缩放/平移以裁剪。尝试使用 blob,但它会降低质量并且经常超时。 Example从摆弄
我使用 Cropper 将本示例中的图像裁剪为圆形: https://github.com/fengyuanchen/cropperjs/blob/master/examples/crop-a-rou
我正在使用 cropper.js在我正在做的事情上,但在让它正常工作时遇到了一些麻烦,是否有可能看到我可能做错了什么。 图像在网页上“重复”。 (例如这里使用随机图像) 我的 HTML,图片: 我的
我正在使用 crop tool from fengyuanchen ,它有很棒的功能。我正在尝试制作一个具有动态尺寸的固定裁剪框。 但我目前只是想弄清楚如何使它达到一定的大小。 我试过以下方法: $(
我正在尝试使用 cropper plugin by fengyuanchen但是遇到了一个不可能的错误 我经常遇到 Uncaught TypeError: canvas.cropper is not
我正在使用 cropper.js 裁剪图像我写了一个指令,它将获取图像 src return { restrict: 'A', controller: _cropper
您好,我正在使用这个插件 https://github.com/fengyuanchen/cropper .我想在引导模式中单击十字按钮时清除图像。我正在使用 jquery 的 cropper 插件。
如何让cropper js的cropBox等于容器大小。换句话说,裁剪框区域应等于预览高度和宽度的可用区域。 最佳答案 更好的解决方案可能是将 autoCropArea 设置为 1 { autoCro
我正在使用cropper.js。我想上传原始图像和裁剪后的坐标(x,y,宽度,高度)而不是裁剪后的图像。首选的方法是什么? 谢谢。 最佳答案 对于这个问题的客户端,这里是我用来打包裁剪框数据并将其发送
我正在使用 android cropper,当我将图像大小设置为 256 以上时,出现以下错误: ERROR/JavaBinder(96): !!! FAILED BINDER TRANSACTION
我克服了很多解决方案和建议,但没有一个对我有用。我正在使用 dropzone 进行图像上传,并使用 cropper js 来裁剪图像。但是每次我裁剪图像后,图像质量都会降低(模糊) 实际图片 /ima
我正在使用最新的cropper.js react 包react-cropper在我目前的项目中,我迷路了。问题是,裁剪区域可以超出图像,这是不应该的。我已经尝试了我能想到的一切。 这里是 _crop
我正在使用cropper插件(版本2.3.4)在模式窗口中裁剪图像。一切似乎都工作正常,除了当我使用“dashed: false”作为选项时,虚线不会被删除。 这是初始化元素上的裁剪器的一小段代码 $
我正在尝试构建一个 what's app 应用程序,但是当我尝试在 build.gradle 中实现 android 图像裁剪器时,它给了我一些这样的错误 "ERROR: Failed to pars
我是一名优秀的程序员,十分优秀!