cropper基本用法
生活随笔
收集整理的這篇文章主要介紹了
cropper基本用法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 1. 基本使用步驟
- 2. 更換裁剪的圖片
- 3. 將裁剪后的圖片，輸出為 base64 格式的字符串
1. 基本使用步驟
在 <head> 中導入 cropper.css 樣式表：
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />在 <body> 的結(jié)束標簽之前，按順序?qū)肴缦碌?js 腳本：
<script src="/assets/lib/jquery.js"></script> <script src="/assets/lib/cropper/Cropper.js"></script> <script src="/assets/lib/cropper/jquery-cropper.js"></script>在卡片的 layui-card-body 主體區(qū)域中，定義如下的 HTML 結(jié)構(gòu)：
<!-- 第一行的圖片裁剪和預覽區(qū)域 --><div class="row1"><!-- 圖片裁剪區(qū)域 --><div class="cropper-box"><!-- 這個 img 標簽很重要，將來會把它初始化為裁剪區(qū)域 --><img id="image" src="/assets/images/sample.jpg" /></div><!-- 圖片的預覽區(qū)域 --><div class="preview-box"><div><!-- 寬高為 100px 的預覽區(qū)域 --><div class="img-preview w100"></div><p class="size">100 x 100</p></div><div><!-- 寬高為 50px 的預覽區(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>美化的樣式：
/* 設置卡片主體區(qū)域的寬度 */ .layui-card-body {width: 500px; }/* 設置按鈕行的樣式 */ .row2 {display: flex;justify-content: flex-end;margin-top: 20px; }/* 設置裁剪區(qū)域的樣式 */ .cropper-box {width: 350px;height: 350px;background-color: cyan;overflow: hidden; }/* 設置第一個預覽區(qū)域的樣式 */ .w100 {width: 100px;height: 100px;background-color: gray; }/* 設置第二個預覽區(qū)域的樣式 */ .w50 {width: 50px;height: 50px;background-color: gray;margin-top: 50px; }/* 設置預覽區(qū)域下方文本的樣式 */ .size {font-size: 12px;color: gray;text-align: center; }/* 設置圖片行的樣式 */ .row1 {display: flex; }/* 設置 preview-box 區(qū)域的的樣式 */ .preview-box {display: flex;flex-direction: column;flex: 1;align-items: center; }/* 設置 img-preview 區(qū)域的樣式 */ .img-preview {overflow: hidden;border-radius: 50%; }實現(xiàn)基本裁剪效果：
// 1.1 獲取裁剪區(qū)域的 DOM 元素var $image = $('#image')// 1.2 配置選項const options = {// 縱橫比aspectRatio: 1,// 指定預覽區(qū)域preview: '.img-preview'}// 1.3 創(chuàng)建裁剪區(qū)域$image.cropper(options)2. 更換裁剪的圖片
拿到用戶選擇的文件
var file = e.target.files[0]根據(jù)選擇的文件，創(chuàng)建一個對應的 URL 地址：
var newImgURL = URL.createObjectURL(file)先銷毀舊的裁剪區(qū)域，再重新設置圖片路徑，之后再創(chuàng)建新的裁剪區(qū)域：
$image.cropper('destroy') // 銷毀舊的裁剪區(qū)域.attr('src', newImgURL) // 重新設置圖片路徑.cropper(options) // 重新初始化裁剪區(qū)域3. 將裁剪后的圖片，輸出為 base64 格式的字符串
var dataURL = $image.cropper('getCroppedCanvas', { // 創(chuàng)建一個 Canvas 畫布width: 100,height: 100}).toDataURL('image/png') // 將 Canvas 畫布上的內(nèi)容，轉(zhuǎn)化為 base64 格式的字符串總結(jié)
以上是生活随笔為你收集整理的cropper基本用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 漂亮的带分步说明的 VBA 自制进度条
- 下一篇： angular封装富文本编辑器指令