PHP支持手势的手机端图片裁剪上传
作者: zms!
日期: 2018.05.09 本文发布于690天前
分类: PHP函数语法点滴
相关:
可用于微信网站、小程序上传头像之类
引入裁剪相关插件
<script src="js/iscroll-zoom.js"></script> <script src="js/hammer.js"></script> <script src="js/jquery.photoClip.js"></script>
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; } }
jquery.photoClip.js图片上传裁剪API教程
参数 描述 默认值 width 截取区域的宽度 200 height 截取区域的高度 200 file 上传图片的 - view 显示截取后图像的容器的选择器或者DOM对象 - ok 确认截图按钮的选择器或者DOM对象 - outputType 指定输出图片的类型,可选 jpg strictSize 是否严格按照截取区域宽高裁剪 false jquery.photoClip.js方法Method
loadStart 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入 loadStart: function() {} - loadComplete 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入loadComplete: function() {} - loadError 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入 - clipFinish 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入 -
讨论区
你可能也喜欢
dbMySQL数据源访问类 2020.03.14,7 pv
php计算当前时间到以后一天、一周、一月、一年 2020.01.12,1 pv
php防止CC攻击代码 php防止网页频繁刷新 2019.06.12,7 pv
php将手机号转为字符串并求所有数字之和,或求字符串中所有数字之和的两个方法: 2018.10.15,15 pv
PHP环境加固,让黑客无从下手 2018.05.15,11 pv
PHP支持手势的手机端图片裁剪上传 2018.05.09,9 pv