PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例_php+photoclip.js +php csdn-优快云博客

本文介绍了一个使用PHP和jQuery.photoClip.js实现的手势控制图片裁剪上传实例。在手机上，用户可以通过双指捏合缩放图片，双指旋转进行90度旋转；在电脑上，鼠标滚轮缩放，双击顺时针旋转。核心代码展示了如何从前端获取base64编码的图片数据并发送到后端，后端接收并解析base64数据，将其转换为图片文件保存。

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