ng-img-crop插件裁剪的图片怎么发送给tp5,tp5怎么接收,
时间: 2024-02-12 14:02:28 浏览: 69
图片上传裁剪
5星 · 资源好评率100%
要将裁剪后的图片发送给TP5,可以使用Ajax来实现。首先,将裁剪后的图片转换为base64格式的字符串,然后将其作为数据发送给后端。
下面是一个示例的Ajax代码:
```javascript
// 获取裁剪后的图片数据
var imgData = cropper.getCroppedCanvas().toDataURL();
// 发送Ajax请求
$.ajax({
url: '/upload/image',
type: 'post',
data: { imgData: imgData },
success: function(res){
// 处理响应结果
},
error: function(err){
console.log(err);
}
});
```
在TP5中,可以使用`input()`方法来获取Ajax发送的数据。具体代码如下:
```php
public function upload()
{
// 获取图片数据
$imgData = $this->request->post('imgData');
// 将base64格式的图片数据转换为二进制数据
$imgData = str_replace('data:image/png;base64,', '', $imgData);
$imgData = str_replace(' ', '+', $imgData);
$imgBinary = base64_decode($imgData);
// 保存图片
$savePath = 'uploads/'.date('Ymd').'/';
$fileName = uniqid().'.png';
$saveFile = $savePath.$fileName;
if(!file_exists($savePath)){
mkdir($savePath, 0777, true);
}
file_put_contents($saveFile, $imgBinary);
// 返回保存的图片路径
return $saveFile;
}
```
在上面的代码中,首先使用`post()`方法获取Ajax发送的`imgData`数据。然后,将base64格式的图片数据转换为二进制数据,并保存为PNG格式的图片文件。最后,返回保存的图片路径。
注意:为了安全起见,需要对上传的图片进行大小和类型的限制,并对图片数据进行验证和过滤。此外,还需要防止XSS和CSRF等安全问题。
阅读全文