圖片裁剪上傳外掛—jquery.photoClip.js

阿新 • • 發佈：2019-01-20

.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>

圖片裁剪上傳外掛—jquery.photoClip.js

圖片裁剪上傳外掛—jquery.photoClip.js

PHP+jQuery.photoClip.js支援手勢的圖片裁剪上傳例項

移動端圖片裁剪上傳—jQuery.cropper.js

Jcrop外掛+Canvas實現圖片上傳預覽+圖片裁剪上傳

簡單圖片裁剪上傳，jsp+servlet+jQuery+Image Cropper（測試）

基於canvas的圖片裁剪上傳及刪除

圖片裁剪上傳示例（node + react）

vue移動端圖片裁剪上傳

上傳（jquery.uploadify.js）

jquery.uploadView.js圖片上傳外掛

帶裁剪的圖片上傳功能jquery外掛

使用JCrop進行圖片裁剪，裁剪js說明，裁剪預覽，裁剪上傳，裁剪設計的圖片處理的工具類和程式碼

移動端壓縮圖片。上傳獲取圖片並壓縮。lrz.all.bundle.js外掛。 accept="image/*"載入慢的問題

cropper.js裁剪圖片，上傳圖片

jQuery 圖片上傳外掛----上傳按鈕以及動態增刪圖片預覽

cropper.js 實現裁剪圖片並上傳(PC端)

cropper.js 實現裁剪圖片並上傳(移動端)

前端圖片壓縮上傳(純js的質量壓縮，非大小壓縮)

怎樣實現前端裁剪上傳圖片功能

圖片的上傳和裁剪

圖片裁剪上傳外掛—jquery.photoClip.js

相關推薦