cropper基本用法

cropper基本用法

1.在中匯入cropper.css樣式表：

rel=

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

src=

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

上傳button

>

type

="button"

class

="layui-btn layui-btn-danger"

>

確定button

>

div>

4.美化的樣式：

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

.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.css樣式表 rel stylesheet href assets lib cropper cropper.css 在的結束標籤之前，按順序匯入如下的 js 指令碼 src assets lib jquery.js script src assets lib cropper ...

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