資訊專欄INFORMATION COLUMN
摘要：上傳頭像這個(gè)一定要設(shè)置是容器的大小
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;
} //這個(gè)一定要設(shè)置,是容器的大小
.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">打開(kāi)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>打開(kāi)圖片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 // 預(yù)覽圖的class名
};
// 模態(tài)框隱藏后需要保存的數(shù)據(jù)對(duì)象
var saveData = {};
var URL = window.URL || window.webkitURL;
var blobURL;
$modal.on(show.bs.modal,function () {
// 如果打開(kāi)模態(tài)框時(shí)沒(méi)有選擇文件就點(diǎn)擊“打開(kāi)圖片”按鈕
if(!$inputImage.val()){
$inputImage.click();
}
}).on(shown.bs.modal, function () {
// 重新創(chuàng)建
$image.cropper( $.extend(options, {
ready: function () {
// 當(dāng)剪切界面就緒后，恢復(fù)數(shù)據(jù)
if(saveData.canvasData){
$image.cropper(setCanvasData, saveData.canvasData);
$image.cropper(setCropBoxData, saveData.cropBoxData);
}
}
}));
}).on(hidden.bs.modal, function () {
// 保存相關(guān)數(shù)據(jù)
saveData.cropBoxData = $image.cropper(getCropBoxData);
saveData.canvasData = $image.cropper(getCanvasData);
// 銷毀并將圖片保存在img標(biāo)簽
$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);
// 選擇文件后，顯示和隱藏相關(guān)內(nèi)容
$(.img-container).removeClass(hidden);
$(.img-preview-box).removeClass(hidden);
$(#changeModal .disabled).removeAttr(disabled).removeClass(disabled);
$(#changeModal .tip-info).addClass(hidden);
} else {
window.alert(請(qǐng)選擇一個(gè)圖像文件！);
}
}
});
} else {
$inputImage.prop(disabled, true).addClass(disabled);
}
}
var sendPhoto = function(){
$(#photo).cropper(getCroppedCanvas,{
width:300,
height:300
}).toBlob(function(blob){
// 轉(zhuǎn)化為blob后更改src屬性，隱藏模態(tài)框
$(#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
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2223.html
摘要：在裁剪框外拖動(dòng)鼠標(biāo)會(huì)生成一個(gè)新的裁剪框。這個(gè)是裁剪框的縱橫比，默認(rèn)是不限制的。初始化完成后是否自動(dòng)顯示裁剪框自動(dòng)顯示的裁剪框的大小。方法的使用格式為手動(dòng)顯示裁剪框。 插件介紹 這是一個(gè)我在寫以前的項(xiàng)目的途中發(fā)現(xiàn)的一個(gè)國(guó)人寫的jQuery圖像裁剪插件，當(dāng)時(shí)想實(shí)現(xiàn)用戶資料的頭像上傳功能，并且能夠預(yù)覽圖片，和對(duì)圖片進(jìn)行簡(jiǎn)單的裁剪、旋轉(zhuǎn)，花了不少時(shí)間才看到了這個(gè)插件，感覺(jué)功能挺全面，代碼實(shí)現(xiàn)起...
摘要：獲取圖片地址之后，進(jìn)行截取圖片這里推薦一個(gè)插件點(diǎn)這里，具體怎么用就不再贅述。等截取圖片之后，需要將截取的文件轉(zhuǎn)換為二進(jìn)制大文件。調(diào)取接口，將二進(jìn)制大文件上傳即可。 上傳頭像插件 目的： 幫助開(kāi)發(fā)者快速開(kāi)發(fā)上傳頭像功能點(diǎn) 背景： 現(xiàn)在b，g能搜到的頭像上傳插件并不太好用，所以想提供一個(gè)比較自由度的上傳并且可以剪切的插件。 資源： 具體資源請(qǐng)查看這里 實(shí)現(xiàn)大致思路如下： 先有一個(gè)上傳的...
摘要：獲取圖片地址之后，進(jìn)行截取圖片這里推薦一個(gè)插件點(diǎn)這里，具體怎么用就不再贅述。等截取圖片之后，需要將截取的文件轉(zhuǎn)換為二進(jìn)制大文件。調(diào)取接口，將二進(jìn)制大文件上傳即可。 上傳頭像插件 目的： 幫助開(kāi)發(fā)者快速開(kāi)發(fā)上傳頭像功能點(diǎn) 背景： 現(xiàn)在b，g能搜到的頭像上傳插件并不太好用，所以想提供一個(gè)比較自由度的上傳并且可以剪切的插件。 資源： 具體資源請(qǐng)查看這里 實(shí)現(xiàn)大致思路如下： 先有一個(gè)上傳的...
摘要：圖片裁剪，壓縮是上傳圖片一定會(huì)遇到的問(wèn)題。如何獲得裁剪的圖片呢獲取裁剪后的圖片信息首先我們可以獲得裁剪框的節(jié)點(diǎn)然后調(diào)用圖片質(zhì)量圖片質(zhì)量越好圖片大小越大這樣就得到了你裁剪的圖片了可以通過(guò)，放到你想要的節(jié)點(diǎn)里展示。 圖片裁剪，壓縮是上傳圖片一定會(huì)遇到的問(wèn)題。這里把我測(cè)試cropper.js這款jquery插件的心得分享一下，可以給新手做參考。 引入插件相關(guān)文件,你們down到本地也可以。這...
摘要：參考效果引入使用結(jié)構(gòu)頭像頭像截圖彈窗取消截圖頭像保存引用具體使用可查看官網(wǎng)修改頭像參加文件點(diǎn)擊圖片初始化關(guān)閉彈窗保存截圖保存數(shù)據(jù) 參考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML結(jié)構(gòu) 頭像 ...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6183·2021-11-29 11:00
