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