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教程