js插件---图片裁剪photoClip
一、总结
一句话总结：页面裁剪图片得到base64格式的图片数据，然后把这个数据通过ajax上传给服务器，服务器将base64图片数据解析成图片并且保存到服务器上面，并且返回图片在服务器上的地址。
二、图片裁剪photoClip
1、截图
2、代码（代码需要放到web服务器里面，因为带了裁剪后图片上传服务器的功能）
百度盘下载链接：链接：https://pan.baidu.com/s/1-kZzwmIvtwLpGA8GrhVHPA 密码：oj8u
裁剪页面代码
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="renderer" content="webkit"> 8 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 9 <meta http-equiv="Cache-Control" content="no-siteapp" /> 10 <title>裁剪图片演示-带初始值</title> 11 <link rel="stylesheet" type="text/css" href="../dist/amazeui.min.css" /> 12 <style type="text/css"> 13 #clip { 14 width: 100%; 15 height: 400px; 16 } 17 </style> 18 </head> 19 20 <body> 21 <div id="clip"></div> 22 23 <div class="am-margin-sm"> 24 <button type="button" class="am-btn am-btn-primary" id="toggle-file">上传头像</button> 25 <button type="button" class="am-btn am-btn-primary" id="clipBtn">裁剪</button> 26 </div> 27 28 <input class="am-hide" type="file" id="file"> 29 30 <img class="am-img-circle" id="img-view"/> 31 32 <script src="../dist/jquery.min.js" type="text/javascript" charset="utf-8"></script> 33 <script src="../dist/iscroll-zoom.min.js" type="text/javascript" charset="utf-8"></script> 34 <script src="../dist/hammer.min.js" type="text/javascript" charset="utf-8"></script> 35 <script src="../dist/photoClip.min.js" type="text/javascript" charset="utf-8"></script> 36 <script> 37 $(function() { 38 var $clip = $("#clip"); 39 var $file = $("#file"); 40 $("#toggle-file").click(function() { 41 $file.trigger("click"); 42 }); 43 44 $clip.photoClip({ 45 400, 46 height: 300, 47 fileMinSize: 20, 48 file: $file, 49 defaultImg: "../img/4.jpg", 50 ok: "#clipBtn", 51 loadStart: function() { 52 console.log("照片读取中"); 53 }, 54 loadProgress: function(progress) { 55 console.log(progress); 56 }, 57 loadError: function() { 58 console.log("图片加载失败"); 59 }, 60 loadComplete: function() { 61 console.log("照片读取完成"); 62 }, 63 imgSizeMin: function(kbs) { 64 console.log(kbs, "上传图片过小"); 65 }, 66 clipFinish: function(dataURL) { 67 document.getElementById("img-view").src = dataURL; 68 69 $.post("index.php", { dataURL: dataURL}, 70 function(data){ 71 alert("Data Loaded: " + data); 72 }); 73 console.log(dataURL); 74 } 75 }); 76 }) 77 </script> 78 79 </body> 80 </html>
后台接收并处理图片代码
1 <?php 2 //print_r($_POST); 3 $base_img=$_POST['dataURL']; 4 // $base_img是获取到前端传递的值 5 $base_img = str_replace('data:image/jpeg;base64,', '', $base_img); 6 // 设置文件路径和命名文件名称 7 $path = "./"; 8 $output_file = time().rand(100,999).'.jpeg'; 9 $path = $path.$output_file; 10 // 创建将数据流文件写入我们创建的文件内容中 11 file_put_contents($path, base64_decode($base_img)); 12 // 输出文件 13 print_r($output_file); 14 ?>