cropper基本用法

在中匯入cropper.css樣式表：

rel=

"stylesheet"
href
="/assets/lib/cropper/cropper.css"
/>

在的結束標籤之前，按順序匯入如下的 js 指令碼：

src=

"/assets/lib/jquery.js"
>
script
>
src=
"/assets/lib/cropper/cropper.js"
>
script
>
src=
"/assets/lib/cropper/jquery-cropper.js"
>
script
>

在卡片的layui-card-body主體區域中，定義如下的 html 結構：

上傳button

>

type

="button"

class

="layui-btn layui-btn-danger"

>

確定button

>

div>

美化的樣式：

/* 設定卡片主體區域的寬度 */

.layui-card-body
/* 設定按鈕行的樣式 */
.row2
/* 設定裁剪區域的樣式 */
.cropper-box
/* 設定第乙個預覽區域的樣式 */
.w100
/* 設定第二個預覽區域的樣式 */
.w50
/* 設定預覽區域下方文字的樣式 */
.size
/* 設定行的樣式 */
.row1
/* 設定 preview-box 區域的的樣式 */
.preview-box
/* 設定 img-preview 區域的樣式 */
.img-preview

// 1.1 獲取裁剪區域的 dom 元素

var $image =$(
'#image'
)// 1.2 配置選項
const options =
// 1.3 建立裁剪區域
$image.
cropper
(options)

var file = e.target.files[

0]

var newimgurl =

url.
createobjecturl
(file)

$image

.cropper
('destroy'
)// 銷毀舊的裁剪區域
.attr
('src'
, newimgurl)
// 重新設定路徑
.cropper
(options)
// 重新初始化裁剪區域

var dataurl = $image

.cropper
('getcroppedcanvas',)
.todataurl
('image/png'
)// 將 canvas 畫布上的內容，轉化為 base64 格式的字串

cropper基本用法

cropper基本用法 1.在中匯入cropper.css樣式表 rel stylesheet href assets lib cropper cropper.css 2.在的結束標籤之前，按順序匯入如下的 js 指令碼 src assets lib jquery.js script src ass...

python基本用法 Python基本用法總結

python 的設計具有很強的可讀性，易於使用。這裡對python基本用法做乙個總結介紹。一 變數型別 1 變數賦值 python中的變數賦值不需要型別宣告，每個變數在使用前都必須賦值，變數賦值之後才會被建立。使用等號進行變數的賦值。2 多個變數賦值 為多個變數賦值時或進行列表內資料的交換時，可以使...

mysql 的基本用法 mysql基本用法

mysql 5.1 中文參考手冊 show databases 顯示資料庫 drop database 資料庫名 刪除資料庫 set names utf8 設定資料庫編碼為utf 8 source x 資料庫名.sql 匯入乙個資料庫 use 資料庫名 嘗試訪問資料庫 create database...