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