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   ?>