您好,登錄后才能下訂單哦!
JavaScript中怎么實(shí)現(xiàn)更換頭像功能,針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
1.在 <head> 中導(dǎo)入 cropper.css 樣式表:
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
2.在 <body> 的結(jié)束標(biāo)簽之前,按順序?qū)肴缦碌?js 腳本:
<script src="/assets/lib/jquery.js"></script> <!-- 導(dǎo)入cropper的js腳本 --> <script src="/assets/lib/cropper/Cropper.js"></script> <script src="/assets/lib/cropper/jquery-cropper.js"></script>
3.定義如下的 HTML 結(jié)構(gòu):
<!-- 第一行的圖片裁剪和預(yù)覽區(qū)域 --> <div class="row1"> <!-- 圖片裁剪區(qū)域 --> <div class="cropper-box"> <!-- 這個 img 標(biāo)簽很重要,將來會把它初始化為裁剪區(qū)域 --> <img id="image" src="/assets/images/sample.jpg" /> </div> <!-- 圖片的預(yù)覽區(qū)域 --> <div class="preview-box"> <div> <!-- 寬高為 100px 的預(yù)覽區(qū)域 --> <div class="img-preview w100"></div> <p class="size">100 x 100</p> </div> <div> <!-- 寬高為 50px 的預(yù)覽區(qū)域 --> <div class="img-preview w50"></div> <p class="size">50 x 50</p> </div> </div> </div> <!-- 第二行的按鈕區(qū)域 --> <div class="row2"> <button type="button" class="layui-btn">上傳</button> <button type="button" class="layui-btn layui-btn-danger">確定</button> </div>
4.樣式CSS:
/* 設(shè)置卡片主體區(qū)域的寬度 */ .layui-card-body { width: 500px; } /* 設(shè)置按鈕行的樣式 */ .row2 { display: flex; justify-content: flex-end; margin-top: 20px; } /* 設(shè)置裁剪區(qū)域的樣式 */ .cropper-box { width: 350px; height: 350px; background-color: cyan; overflow: hidden; } /* 設(shè)置第一個預(yù)覽區(qū)域的樣式 */ .w100 { width: 100px; height: 100px; background-color: gray; } /* 設(shè)置第二個預(yù)覽區(qū)域的樣式 */ .w50 { width: 50px; height: 50px; background-color: gray; margin-top: 50px; } /* 設(shè)置預(yù)覽區(qū)域下方文本的樣式 */ .size { font-size: 12px; color: gray; text-align: center; } /* 設(shè)置圖片行的樣式 */ .row1 { display: flex; } /* 設(shè)置 preview-box 區(qū)域的的樣式 */ .preview-box { display: flex; flex-direction: column; flex: 1; align-items: center; } /* 設(shè)置 img-preview 區(qū)域的樣式 */ .img-preview { overflow: hidden; border-radius: 50%; }
5.導(dǎo)入自己的jS文件,并寫以下內(nèi)容,實(shí)現(xiàn)基本剪裁效果:
$(function() { // 1.1 獲取裁剪區(qū)域的 DOM 元素 var $image = $('#image'); // 1.2 配置選項(xiàng) const options = { // 縱橫比 aspectRatio: 1, // 指定預(yù)覽區(qū)域 preview: '.img-preview' }; // 1.3 創(chuàng)建裁剪區(qū)域 $image.cropper(options); })
做完以上準(zhǔn)備工作,可以實(shí)現(xiàn)如下效果
1.添加上傳文件的輸入框,注意要把輸入框隱藏起來:
<!-- 第二行的按鈕區(qū)域 --> <div class="row2"> <!-- 通過 accept屬性,可以指定,允許用戶選擇什么類型的文件 --> <input type="file" id="file" accept="image/png,image/jpeg" /> <button type="button" class="layui-btn" id="btnChooseImage">上傳</button> <button type="button" class="layui-btn layui-btn-danger" id='btnUpload'>確定</button> </div>
2.為文件選擇框綁定change事件
// 為文件選擇框綁定 change事件 // 只要選擇的文件發(fā)生變化就會觸發(fā)change事件 $('#file').on('change', function(e) { // 獲取用戶選擇的文件 var filelist = e.target.files; if (filelist.length === 0) { return layer.msg('請選擇照片!'); } // 1.拿到用戶選擇的文件 var file = e.target.files[0]; // 2.將文件,轉(zhuǎn)化為路徑 var imgURL = URL.createObjectURL(file); // 3.重新初始化剪裁區(qū)域 $image .cropper('destroy') // 銷毀舊的裁剪區(qū)域 .attr('src', imgURL) // 重新設(shè)置圖片路徑 .cropper(options) // 重新初始化裁剪區(qū)域 })
3.為確定按鈕綁定點(diǎn)擊事件
// 為確定按鈕,綁定點(diǎn)擊事件 $('#btnUpload').on('click', function() { // 1.要拿到用戶剪裁之后的頭像 var dataURL = $image .cropper('getCroppedCanvas', { // 創(chuàng)建一個 Canvas 畫布 width: 100, height: 100 }) .toDataURL('image/png') // 將 Canvas 畫布上的內(nèi)容,轉(zhuǎn)化為 base64 格式的字符串 // 2.調(diào)用接口,把頭像上傳到服務(wù)器 $.ajax({ method: 'POST', url: '/my/update/avatar', data: { avatar: dataURL }, success: function(res) { if (res.status !== 0) { return layer.msg('更換頭像不成功!'); } layer.msg('更換頭像成功!'); window.parent.getUserInfo(); } })
關(guān)于JavaScript中怎么實(shí)現(xiàn)更換頭像功能問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。