PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

//这个是插件选择图片以后初始化代码，将上传的图片转为base64的字符串，传递给后端
$(function(){//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);var clipArea = new bjj.PhotoClip("#clipArea2", {size: [408, 272],// 截取框的宽和高组成的数组。默认值为[260,260]outputSize: [0, 0], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小//outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"file: "#file2", // 上传图片的<input type="file">控件的选择器或者DOM对象view: ".upload_view2", // 显示截取后图像的容器的选择器或者DOM对象ok: "#clipBtn2", // 确认截图按钮的选择器或者DOM对象loadStart: function() {// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入$('.cover-wrap').fadeIn();console.log("照片读取中");},loadComplete: function() {// 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入console.log("照片读取完成");},//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入clipFinish: function(dataURL) {// 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入$.ajax({ url: "{:url('Index/upload_zhanghu')}", data: {str: dataURL}, type: 'post', dataType: 'html',success:function(data){//请求后端接口返回数据，以后的处理
                     var daa =JSON.parse( data );$("#com_logo_path").val(daa.datas.path);$("#com_logo_savename").val(daa.datas.savename);}, }) }});$(".upload_title_right").click(function(){$(".upload_D").fadeOut();});$("#open2").click(function(){$("#upload_D2").fadeIn();});})

//后端PHP代码    upload.php图片上传

public function upload_zhanghu()
{$base64 = htmlspecialchars($_POST['str']); if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)) { // var_dump($result);die;$type = $result[2];$name = Session::get('login_user.id').time() . ".{$type}"; $new_file = './static/uploads/logo/' . $name; if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64)))) {//返回前端ajax请求，文件上传的路径和名称
          $return['path'] = '/static/uploads/logo/';$return['savename'] = $name;output_data($return);} }
}

然后再form表单提交，将文件路径和名称传递给后端