基本使用步驟
在 中匯入 cropper.css 樣式表：
100 x 100
50 x 50
上傳確定
/* 設定卡片主體區域的寬度 */
.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]
先銷毀舊的裁剪區域，再重新設定路徑，之後再建立新的裁剪區域：
$image
.cropper(『destroy』) // 銷毀舊的裁剪區域
.attr(『src』, newimgurl) // 重新設定路徑
.cropper(options) // 重新初始化裁剪區域
將裁剪後的，輸出為 base64 格式的字串
var dataurl = $image
.cropper(『getcroppedcanvas』, )
.todataurl(『image/png』) // 將 canvas 畫布上的內容，轉化為 base64 格式的字串
前端工程師必備之 LESS
一 為什麼要用less？作為前端學習者的我們 或多或少都要學些 css 它作為前端開發的三大基石之一，時刻引領著 web 的發展潮嚮。而 css 作為一門標記性語言，可能 給初學者第一印象 就是簡單易懂，毫無邏輯，不像程式設計該有的樣子。在語法更新時，每當新屬性提出，瀏覽器的相容又會馬上變成絆腳石，...
前端工程師必備之 typescript
型別名 anylet name string bob let age number 37 首先我們看看數字列舉，如果你使用過其它程式語言應該會很熟悉。enum direction如上，我們定義了乙個數字列舉，up使用初始化為1。其餘的成員會從1開始自動增長。換句話說，direction.up的值為1...
Python工程師必備哪些技能？
python工程師必備哪些技能？學習路線是什麼？隨著人工智慧時代的到來以及國家一系列政策支援，python熱度大增吸引了更多人加入學習。為了能夠快速的掌握python專業技能，成為企業急需的高階人才，絕大多數人會選擇參加專業的學習。python具有簡單 易學 免費 開源 可移植 可擴充套件 可嵌入 ...