分享cropper剪切单张图片demo
生活随笔
收集整理的這篇文章主要介紹了
分享cropper剪切单张图片demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>上傳頭像</title><link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><style type="text/css">body{text-align: center;}#user-photo {width:300px;height:300px;margin-top: 10px;}#photo {max-width:100%;max-height:350px;} //這個一定要設置,是容器的大小.img-preview-box {text-align: center;}.img-preview-box > div {display: inline-block;;margin-right: 10px;}.img-preview {overflow: hidden;}.img-preview-box .img-preview-lg {width: 150px;height: 150px;}.img-preview-box .img-preview-md {width: 100px;height: 100px;}.img-preview-box .img-preview-sm {width: 50px;height: 50px;border-radius: 50%;}</style>
</head>
<body>
<button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打開</button><br/>
<div class="user-photo-box"><img id="user-photo" src="">
</div>
</div>
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title text-primary"><i class="fa fa-pencil"></i>更換頭像</h4></div><div class="modal-body"><p class="tip-info text-center">未選擇圖片</p><div class="img-container hidden"><img src="" alt="" id="photo"></div><div class="img-preview-box hidden"><hr><span>150*150:</span><div class="img-preview img-preview-lg"></div><span>100*100:</span><div class="img-preview img-preview-md"></div><span>30*30:</span><div class="img-preview img-preview-sm"></div></div></div><div class="modal-footer"><label class="btn btn-danger pull-left" for="photoInput"><input type="file" class="sr-only" id="photoInput" accept="image/*"><span>打開圖片</span></label><button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button><button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button></div></div></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">var initCropperInModal = function(img, input, modal){var $image = img;var $inputImage = input;var $modal = modal;var options = {aspectRatio: 1, // 縱橫比
viewMode: 2,preview: '.img-preview' // 預覽圖的class名
};// 模態框隱藏后需要保存的數據對象var saveData = {};var URL = window.URL || window.webkitURL;var blobURL;$modal.on('show.bs.modal',function () {// 如果打開模態框時沒有選擇文件就點擊“打開圖片”按鈕if(!$inputImage.val()){$inputImage.click();}}).on('shown.bs.modal', function () {// 重新創建
$image.cropper( $.extend(options, {ready: function () {// 當剪切界面就緒后，恢復數據if(saveData.canvasData){$image.cropper('setCanvasData', saveData.canvasData);$image.cropper('setCropBoxData', saveData.cropBoxData);}}}));}).on('hidden.bs.modal', function () {// 保存相關數據
saveData.cropBoxData = $image.cropper('getCropBoxData');saveData.canvasData = $image.cropper('getCanvasData');// 銷毀并將圖片保存在img標簽
$image.cropper('destroy').attr('src',blobURL);});if (URL) {$inputImage.change(function() {var files = this.files;var file;if (!$image.data('cropper')) {return;}if (files && files.length) {file = files[0];if (/^image\/\w+$/.test(file.type)) {if(blobURL) {URL.revokeObjectURL(blobURL);}blobURL = URL.createObjectURL(file);// 重置cropper，將圖像替換
$image.cropper('reset').cropper('replace', blobURL);// 選擇文件后，顯示和隱藏相關內容
$('.img-container').removeClass('hidden');$('.img-preview-box').removeClass('hidden');$('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');$('#changeModal .tip-info').addClass('hidden');} else {window.alert('請選擇一個圖像文件！');}}});} else {$inputImage.prop('disabled', true).addClass('disabled');}}var sendPhoto = function(){$('#photo').cropper('getCroppedCanvas',{width:300,height:300}).toBlob(function(blob){// 轉化為blob后更改src屬性，隱藏模態框
$('#user-photo').attr('src',URL.createObjectURL(blob));$('#changeModal').modal('hide');});}$(function(){initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));});
</script>
</body>
</html>
?
官方示例 https://fengyuanchen.github.io/cropper/
參考:https://segmentfault.com/a/1190000012344970
?
轉載于:https://www.cnblogs.com/wangziyue/p/9089538.html
總結
以上是生活随笔為你收集整理的分享cropper剪切单张图片demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iptables基本配置方法
- 下一篇： Rancher2.0中邮件通知的设置