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

秉承一貫原則，先上效果圖

擷取前：

的寬度是固定的 width:100%;padding:20px;

顯示的時候會自動根據原始的長寬設定

擷取後：

其實這裡還有一點小bug 應該根據擷取後的長寬比重新設定畫板的高度和寬度

貼上主要**：

var cutimg = function

() cutimg.prototype.init = function
(id, src) ;
container.addeventlistener('touchstart', function
(e) );
container.addeventlistener('touchmove', function
(e) 
},false);
container.addeventlistener('touchend', function
(e) );
}cutimg.prototype.previewimg = function
() cutimg.prototype.rebackimg = function
()

cutimg.rebackimg().substring(22);去掉前面的宣告

需要改動的地方我都用了todo做標識。

還有就是畫板本身是沒有垂直居中效果的，我是用了樣式來控制

class="hami-vertical-center-container"

style="height: calc(100% - 44px);background: #000;">
id="head_container"
style="padding: 20px;">
canvas>
div>如何設定hami-vertical-center-container這個class樣式達到其子塊的垂直居中效果
width

height

:100%;

-webkit-align-items

: center;

align-items

: center;

display

: -webkit-flex;

display

: flex;

手機端頭像上傳前端壓縮

壓縮方法 fn.uploadheader function fun else 使用canvas修正的方向 var canvas document.createelement canvas canvas.width width drawwidth canvas.height height drawhe...

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

使用 基於canvas擼的乙個 vue頭像裁剪控制項 pc端，滑鼠左鍵移動 滾輪縮放 右鍵旋轉 移動端，單指移動，雙指移動 縮放 旋轉 屬性backboxsize 背景方格大小 預設值 10 backboxcolor0 背景方格顏色0 預設值 fcf2ff backboxcolor1 背景方格顏色1...

小議頭像預覽裁剪上傳的實現

在做頭像上傳的時候，瀏覽器預設是無法取得本地的，當然 html5 是可以的。不過ie6 8怎麼破？目前比較通用的方案都是 flash 解決。說道頭像預覽和裁剪，我最熟悉的就是 discuz 的那個了，非常方便好用。不僅可以選擇本地，還能直接呼叫攝像頭拍攝，當然前提是你必須有個攝像頭。於是我心血來潮的...