vue 移動端頭像裁剪 Vue 頭像裁剪控制項

2021-10-12 14:54:11 字數 771 閱讀 4206

使用 基於canvas擼的乙個 vue頭像裁剪控制項

pc端,滑鼠左鍵移動、滾輪縮放、右鍵旋轉

移動端,單指移動,雙指移動、縮放、旋轉

屬性backboxsize 背景方格大小 預設值:10

backboxcolor0 背景方格顏色0 預設值:#fcf2ff

backboxcolor1  背景方格顏色1 預設值:#a4a4a4

maskcolor 蒙板顏色 預設值:#00000080

maskpadding 蒙板內邊距 預設值:20

linewidth 預覽框線寬 預設值:2

linecolor 預覽框顏色 預設值:#ffffff

isarc 是否是圓形 預設值:true

round 預覽框圓色 預設值:10

方法getrotate() 獲得旋轉度數

getscale()  獲得縮放比例

getdrawx()  獲得繪製位置x

getdrawy() 獲得繪製位置y

setrotate(val) 設定旋轉度數

setscale(val)  設定縮放比例

setdrawx(val)  設定繪製位置x

setdrawy(val)  設定繪製位置y

ondraw()   開始繪製

沒有做保持中心旋轉的處理,和限制裁剪位置和尺寸的處理

因有自由旋轉功能,做保持中心旋轉的處理,和限制裁剪位置和尺寸的演算法太複雜。沒能力處理

如有能力解決者。希望能提供解決方案。

qq群:1021458098

實現移動端頭像擷取並上傳

秉承一貫原則,先上效果圖 擷取前 的寬度是固定的 width 100 padding 20px 顯示的時候會自動根據原始的長寬設定 擷取後 其實這裡還有一點小bug 應該根據擷取後的長寬比重新設定畫板的高度和寬度 貼上主要 var cutimg function cutimg.prototype.i...

ios 裁剪圓形頭像 iOS中裁剪圓形頭像

void clipimage 0.載入 uiimage image uiimage imagenamed 阿狸頭像 1.開啟位圖上下文,跟尺寸一樣大 uigraphicsbeginimagecontextwithoptions image.size,no,0 2.設定圓形裁剪區域,正切與 2.1建立...

android裁剪頭像上傳

由於最近沒什麼事,把以前經常用到的東西自己重頭寫一遍,然後記錄下來,給需要的朋友使用,也方便自己以後學習 思路 1.首先選擇 2.進行裁剪 3.儲存到本地 intent intent new intent android.media.action.image capture intent.putex...