如何在 laravel 控制器中通过 Cropper Js 接收图像 blob 数据
How to recieve image blob data by Cropper Js in laravel controller
我正在使用 cropper js 和 laravel,我裁剪了图像并将其放入表单数据并通过 Jquery Ajax 将其发送到 Laravel 控制器.
问题是我没有在控制器中获取数据。但只会得到一个错误。
代码如下:
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 控制器
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);
您也可以试试这个,因为来自您的 AJAX 的 url 是一个 post 请求,转到 app/Http/Middleware/VerifyCsrfToken.php 并执行此操作
protected $except = [
'crop/save'
];
然后在你的控制器中你可以像这样保存图像
public function fileUpload(Request $request){
$file = $request->file('croppedImage');
if($file) {
$file->move(public_path() .'/images', $filename);
}
}
或
public function fileUpload(Request $request){
$file = $request->file('croppedImage');
if($file) {
Storage::disk('local')->put($filename, File::get($file));
}
}
如果您使用第二种方式,请不要忘记在控制器顶部执行此操作'
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Storage;
$filename 变量是您选择用来保存文件的名称。
我正在使用 cropper js 和 laravel,我裁剪了图像并将其放入表单数据并通过 Jquery Ajax 将其发送到 Laravel 控制器. 问题是我没有在控制器中获取数据。但只会得到一个错误。 代码如下:
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 控制器
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);
您也可以试试这个,因为来自您的 AJAX 的 url 是一个 post 请求,转到 app/Http/Middleware/VerifyCsrfToken.php 并执行此操作
protected $except = [
'crop/save'
];
然后在你的控制器中你可以像这样保存图像
public function fileUpload(Request $request){
$file = $request->file('croppedImage');
if($file) {
$file->move(public_path() .'/images', $filename);
}
}
或
public function fileUpload(Request $request){
$file = $request->file('croppedImage');
if($file) {
Storage::disk('local')->put($filename, File::get($file));
}
}
如果您使用第二种方式,请不要忘记在控制器顶部执行此操作'
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Storage;
$filename 变量是您选择用来保存文件的名称。