PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例
2024-08-24 16:00:45
PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度。
下面让我们来看看核心代码:
post的是base64,后端处理base64转存图片。
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#file",
view: "#view",
ok: "#clipBtn",
loadStart: function() {
$(".photo-clip-rotateLayer").html("<img src='images/loading.gif'/>");
console.log("照片读取中");
},
loadComplete: function() {
console.log("照片读取完成");
},
clipFinish: function(dataURL) {
$.ajax({
url: "upload.php",
data: {str: dataURL},
type: 'post',
dataType: 'html',
})
}
});
upload.php图片上传
$base64 = htmlspecialchars($_POST['str']);
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)) {
$type = $result[2];
$new_file = "./uploads/" . time() . ".{$type}";
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64)))) {
echo '新文件保存成功:', $new_file;
}
}
本实例源码下载:https://www.sucaihuo.com/php/684.html
最新文章
- 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)
- CentOS直接解压可用的memcached、nginx、keepalived
- static的作用
- 关于禁止ipad的home键解决方法
- 通过Migration在EF6中用多个DbContext
- (六)6.12 Neurons Networks from self-taught learning to deep network
- 12款有助于简化CSS3开发的工具
- Objective-C Delegate
- BZOJ 1613: [Usaco2007 Jan]Running贝茜的晨练计划
- animate的{queue:false,duration:400}意思
- 如何在C#项目中使用NHibernate
- 将Excel上千条数据写入到数据库中
- 每个程序员都应该用MBP
- 二叉树,AVL树和红黑树
- d3.csv()后获取的数据不是数组,而是对象
- 冒泡排序(JAVA实现)
- Ubuntu 安装 JDK8 的两种方式
- Nginx+Tomcat+Https 服务器负载均衡配置
- Python学习(三十)—— Django框架简介
- sqlite c#