基於jQuery和cropper點選頭像上傳並預覽裁剪圖片
阿新 • • 發佈：2018-11-13
使用jquery上傳前，預覽圖片，裁剪，示例使用php接收上傳的檔案，並且儲存為裁剪後的圖片。不需要上傳後再裁剪圖片，只需要本地裁剪好即可，裁剪的時候也可以旋轉圖片。裁剪控制元件使用了，cropper。
html程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content="[email protected]"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="//cdn.bootcss.com/cropper/3.0.0/cropper.min.css" rel="stylesheet" type="text/css"> <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js" type="text/javascript"></script> <script src="//cdn.bootcss.com/cropper/3.0.0/cropper.min.js" type="text/javascript"></script> <script src="avatar.js" type="text/javascript"></script> <style type="text/css"> .p10{padding: 10px} .clear::after {height: 0px; clear: both; display: block; content: " ";} .up{width:600px; height: auto;padding: 20px;} .up-file{position: relative;padding-bottom: 10px;} .up-file button{font-size:14px;border: 0;line-height: 25px;} .up-file input{z-index: 1;position:absolute;left:0;top:0;width:100%;height: 100%;filter:alpha(opacity=0);opacity: 0;} .up-before {width:350px;height: 350px;padding:0px;overflow: hidden;float: left;background: #fcfcfc;border: 1px solid #e3e3e3;} .up-after {width:186px;height:186px;overflow:hidden;margin-left:25px;float:left;background: #fcfcfc;border: 1px solid #e3e3e3;border-radius: 5px;} .up-footer{font-size: 18px;width: 100px;background-color: #eaeaea;margin: 10px;padding: 5px;} .up-footer i{width:28px;} </style> <script> </script> </head> <body> <div class="up"> <div class="up-file clear"> <button type="button" > <i class="fa fa-cloud-upload"></i> 選擇要上傳的檔案</button> <input id="inputImage" type="file" accept="image/*"> </div> <div class="clear"> <div class="up-before"><img src="" id="image"></div> <div class="up-after"></div> </div> <center> <div class="up-footer"> <i class="fa fa-rotate-left" onclick="rotateImg(-90)"></i> <i class="fa fa-rotate-right" onclick="rotateImg(90)"></i> <i class="fa fa-check" id="upImgBtn"></i> </div> </center> </div> </body> </html>
對應的javascript程式碼:
本文使用了cropper，裁剪圖片
$(document).ready(function($) { 'use strict'; // cropper初始化 var $image = $('#image'); //調整cropper引數，在這裡調整 $image.cropper({ aspectRatio: '1', autoCropArea: 0.8, viewMode: 2, preview: '.up-after', }); // 圖片檔案變化 var $inputImage = $('#inputImage'); var URL = window.URL || window.webkitURL; var blobURL; if (URL) { $inputImage.change(function() { var files = this.files; var file; if (files && files.length) { file = files[0]; if (/^image\/\w+$/.test(file.type)) { blobURL = URL.createObjectURL(file); $image.one('built.cropper', function() { // Revoke when load complete URL.revokeObjectURL(blobURL); }).cropper('reset').cropper('replace', blobURL); $inputImage.val(''); } else { window.alert('Please choose an image file.'); } } }); } else { $inputImage.prop('disabled', true).parent().addClass('disabled'); } //繫結上傳事件 $('#upImgBtn').on('click', function() { var imgSrc = $image.attr("src"); if (imgSrc == "") { alert("沒有選擇上傳的圖片"); return false; } var url = $(this).attr("url"); var canvas = $("#image").cropper('getCroppedCanvas'); var data = canvas.toDataURL(); $.ajax({ url: 'up.php', dataType: 'json', type: "POST", data: { "image": data.toString() }, success: function(data, textStatus) { alert('上傳成功') }, error: function() { alert('上傳失敗') }, complete: function(xhr, stat) {} }); }); }); function rotateImg(d) { $("#image").cropper('rotate', d); }
上傳效果預覽
裁剪好後，通過upImgBtn按鈕上傳檔案，這裡上傳的檔案為經過base64編碼的影象，可以通過php或者java接受上傳的檔案，
完整的示例，請參考。