cropper.js實現圖片裁剪預覽並轉換為base64發送至服務端。
阿新 • • 發佈：2017-12-24
urlencode button 圖片 all 完成 r.js borde lan meta
一 、準備工作
1.首先需要先下載cropper,常規使用npm，進入項目路徑後執行以下命令：
npm install cropper
2. cropper基於jquery，在此不要忘記引入jq,同時記得引入cropper.css
3. 此處後端使用的nodejs，不過不懂node的影響也不大。
二 、 圖片裁剪並預覽
1.首先利用cropper完成圖片裁剪並預覽：
<input type="file" name="" id="imgBtn" name="imgCut"> <!-- 預覽容器--> <div class="box"> <img src="" id="preview"> </div> <!-- 點擊上傳按鈕裁剪--> <input type="button" name="" value="上傳" onclick="imgSubmit()">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="../js/cropper.min.js"></script><script> //生成裁剪區域 $("#imgBtn").change(function(e){ var file = $("#imgBtn").get(0).files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload=function(e){ alert(‘文件讀取完成‘); $("#preview").attr("src",e.target.result)var $img = $("#preview"); $(‘.box > img‘).cropper({ aspectRatio: 16 / 9, crop: function(data) { } }); } }) //預覽裁剪後的圖片 function imgSubmit(){ var result= $(‘.box > img‘).cropper("getCroppedCanvas"); document.body.appendChild(result); }
</script>
裁剪並預覽的完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/cropper.min.css"> <style type="text/css"> .box{ width: 600px; height: 600px; border:5px solid #555fff; border-radius: 10px; } </style> </head> <body> <input type="file" name="" id="imgBtn" name="imgCut"> <!-- 預覽容器--> <div class="box"> <img src="" id="preview"> </div> <!-- 點擊上傳按鈕裁剪--> <input type="button" name="" value="上傳" onclick="imgSubmit()"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="../js/cropper.min.js"></script> <script> //生成裁剪區域 $("#imgBtn").change(function(e){ var file = $("#imgBtn").get(0).files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload=function(e){ alert(‘文件讀取完成‘); $("#preview").attr("src",e.target.result) var $img = $("#preview"); $(‘.box > img‘).cropper({ aspectRatio: 16 / 9, crop: function(data) { } }); } }) //預覽裁剪後的圖片 function imgSubmit(){ var result= $(‘.box > img‘).cropper("getCroppedCanvas"); document.body.appendChild(result); } </script> </body> </html>
三、圖片裁剪預覽後以base64發送至服務端
此處後端使用nodejs，沒有基礎的可以看我之前的nodejs文章。
前端頁面如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="../css/cropper.min.css"> <style type="text/css"> .box{ width: 600px; height: 600px; border:5px solid #555fff; border-radius: 10px; } </style> </head> <body> <form> <input type="file" name="" id="imgBtn" name="imgCut"> <div class="box"> <img src="" id="previewyulan"> </div> <input type="button" name="" value="上傳" onclick="imgSubmit()"> </form> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="../js/cropper.min.js"></script> <script type="text/javascript"> $("#imgBtn").change(function(e){ var file = $("#imgBtn").get(0).files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload=function(e){ alert(‘文件讀取完成‘); $("#previewyulan").attr("src",e.target.result) var $img = $("#preview"); $(‘.box > img‘).cropper({ aspectRatio: 16 / 9, crop: function(data) { //轉換為base64 // var $imgData=$img.cropper(‘getCroppedCanvas‘) // var dataurl = $imgData.toDataURL(‘image/png‘); // $("#previewyulan").attr("src",dataurl) } }); } }) function imgSubmit(){ //獲取裁剪後的canvas對象 var result= $(‘.box > img‘).cropper("getCroppedCanvas"); //將canvas對象轉換為base64 var dataurl =result.toDataURL(‘image/png‘); document.body.appendChild(result); //發起post請求 var data = "img="+dataurl+""; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(event){ if(xhr.readyState == 4){ //4:解析完畢 if(xhr.status == 200){ //200:正常返回 console.log(xhr) } } }; xhr.open(‘POST‘,‘imgCut‘,true); //true為異步 xhr.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘); xhr.send(data); } </script> </body> </html>
路由攔截：
app.post("/html/imgCut",function(req,res){
console.log(req.body.img);
//此處省略詳細的後端邏輯代碼
res.send();
})
有需要可以留言。
cropper.js實現圖片裁剪預覽並轉換為base64發送至服務端。