剪裁圆形图片cropie
<!DOCTYPE html> <html> <head> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/croppie/2.6.2/croppie.js"></script> <link rel="Stylesheet" href="https://cdn.bootcss.com/croppie/2.6.2/croppie.css" /> <style> button, a.btn { background-color: #189094; color: white; padding: 10px 15px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 16px; cursor: pointer; text-decoration: none; text-shadow: none; } button:focus { outline: 0; } .file-btn { position: relative; } .file-btn input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .actions { padding: 5px 0; } .actions button { margin-right: 5px; } .pop_main{display:none} .pop_con{ width: 400px; height: 400px; background: #fff; z-index: 100; position: relative;} .pop_mask{background-color: rgba(0, 0, 0, 0.5);position: absolute; width: 100%; left: 0; top: 0; bottom: 0;} </style> </head> <body> <div class="actions"> <button class="file-btn"> <span>上传</span> <input type="file" id="upload" value="选择图片文件" /> </button> <div class="pop_main"> <div class="pop_con"> <div> <button class="pop_close">x</button> </div> <div class="crop"> <div id="upload-demo"></div> <button class="upload-result">裁剪</button> </div> </div> <div class="pop_mask"></div> </div> <div id="result"></div> </div> <script> $(function(){ var $uploadCrop; function readFile(input) { if (input.files && input.files[0]) { console.log("file----",input.files[0]) var reader = new FileReader(); reader.onload = function (e) { $uploadCrop.croppie('bind', { url: e.target.result }); } reader.readAsDataURL(input.files[0]); } else { alert("Sorry - you're browser doesn't support the FileReader API"); } } $uploadCrop = $('#upload-demo').croppie({ viewport: { width: 200, height: 200, type: 'circle' }, boundary: { width: 300, height: 300 } }); $('#upload').on('change', function () { $(".pop_main").show(); $(".pop_con").css({'top':0,'opacity':0}) $(".pop_con").animate({'top':'50%','opacity':1}) readFile(this); }); $('.upload-result').on('click', function (ev) { $uploadCrop.croppie('result', 'canvas').then(function (resp) { console.log("file---2",resp) popupResult({ src: resp }); }); }); $('.pop_close').on('click',function(ev){ $(".pop_main").hide() var file = $("#upload") file.after(file.clone().val("")); file.remove(); }) function popupResult(result) { var html; if (result.html) { html = result.html; } if (result.src) { html = '<img src="' + result.src + '" />'; } $("#result").html(html); } }); </script> </body> </html>