影象（頭像）選擇，擷取，壓縮，上傳的分享
阿新 • • 發佈：2019-02-18
原文是來自於DCloud的官方論壇的，看完之後覺得非常實用，因此分享出來希望更多的童鞋可以參考下。有興趣的可以點選下面的連結前去觀看原文
思路：
1. 通過拍照或者選擇一張照片
2. 將照片作為底，一個正方形容器作為邊界。通過移動正方形容器獲取所需圖形的邊界。
3. 擷取圖片，並壓縮到指定大小。
4. 上傳到伺服器。
具體實現：
1. 獲取照片資源
1.1 從相簿選擇
function chooseImgFromAlbums(){
plus.gallery.pick(function(file){
changeToLocalUrl(file);},function(err 1.2 拍照
function chooseImgFromPictures(){var cmr = plus.camera.getCamera();
cmr.captureImage(function(file){
changeToLocalUrl(file);},function(err){
console.log(JSON.stringify(err));},{
index:'2',}); 1.3 相簿選擇和拍照選擇返回的路徑都是相對路徑，為了讓其顯示在img裡面，我們需要轉換為本地路徑。此處開啟一張新頁面來對圖片進行處理
function changeToLocalUrl(path){
plus.io.resolveLocalFileSystemURL(path,function(entry){
openWindow('uploadImg.html?src=' entry.toLocalURL());});}
- 以一個正方形容器擷取圖片。
此處，自己寫了一些簡單的js來做影象擷取，這些js修改起來也很方便。
首先，看一下整個頁面：
功能很簡單：點選放大，縮小可以放大縮小正方形的區域。用手指移動正方形，來改變正方形所包含的內容。
實現的思路：通過監聽正方形的touchstart和touchmove事件，改變它的top，left值。實現移動。
具體程式碼如下：
varClip={
size:12,//這個表示正方形目前的邊長，乘上一個基數就是當前的畫素值
range:{},//用來控制正方形left和top的極限值，以免移出邊界
topCss:0,//表示當前的top值
leftCss:0,//表示當前的left值
touchX:0,//當前的手指所處的X座標
touchY:0,//當前手指的Y座標
timer:null,//用來做touchmove的函式節流，以免連續觸發touchmove事件導致的效率問題
changeBase:function(index){//這個函式用來改變正方形的邊長，一般還需要設定最大邊長和最小邊長this.size = index;
$('#clip').css({
height:this.size 'rem',
width:this.size 'rem',
lineHeight:this.size 'rem'});this.changeRange();//邊長改變，將引起當前top, left和range的變化，統一調changeRange的方法來修改},
changeRange:function(){//這個方法用來計算初始top, left以及邊界值。其演算法收到當前頁面佈局影響，需要自行修改this.topCss =($('body').height()- baseSize * extraHeight - baseSize *this.size)/2 baseSize * headerHeight;this.leftCss =($('body').width()- baseSize *this.size)/2;this.changeClipStyle(this.leftCss,this.topCss);//極限值，需控制不超出圖片區域var minTop =($('body').height()- baseSize * extraHeight - $('#img').height())/2 baseSize * headerHeight;var maxTop = $('body').height()-($('body').height()- baseSize * extraHeight - $('#img').height())/2-
baseSize * footerHeght - baseSize *this.size;var minLeft =0;var maxLeft = $('body').width()- baseSize *this.size;this.range ={
minTop: minTop,
maxTop: maxTop,
minLeft: minLeft,
maxLeft: maxLeft};},
initEvent:function(){//事件初始化
mui('body').on('tap','#enlarge',function(e){Clip.changeBase(1);});
mui('body').on('tap','#reduce',function(e){Clip.changeBase(-1);})var clip = document.getElementById('clip');//開始接觸的時候，記錄當前的手指位置
clip.addEventListener('touchstart',function(event){Clip.touchX =event.touches ?event.touches[0].clientX :event.screenX;Clip.touchY =event.touches ?event.touches[0].clientY :event.screenY;event.preventDefault();});//移動後，記錄新的位置，設定新的top和left值
clip.addEventListener('touchmove',function(event){//設定20ms的事件if(Clip.timer !=null){//函式節流return;}Clip.timer = setTimeout(function(){var x =event.touches ?event.touches[0].clientX :event.screenX;var y =event.touches ?event.touches[0].clientY :event.screenY;var disX = x -Clip.touchX;var disY = y -Clip.touchY;var nowLeft =Clip.leftCss disX;var nowTop =Clip.topCss disY;if(nowLeft <Clip.range.minLeft){
nowLeft =Clip.range.minLeft;}if(nowLeft >Clip.range.maxLeft){
nowLeft =Clip.range.maxLeft;}if(nowTop <Clip.range.minTop){
nowTop =Clip.range.minTop;}if(nowTop >Clip.range.maxTop){
nowTop =Clip.range.maxTop;}Clip.changeClipStyle(nowLeft, nowTop);Clip.touchX = x;Clip.touchY = y;Clip.timer =null;},20);});},//設定新的樣式，並改變當前的top和left值
changeClipStyle:function(leftCss, topCss){
$('#clip').css({
left: leftCss 'px',
top: topCss 'px'});Clip.leftCss = leftCss;Clip.topCss = topCss;}}
- 移動到正方形到合適的區域後，點選完成，就將完成擷取圖片和壓縮圖片的功能。
主要思路是： 呼叫plus.zip.compressImage函式來完成擷取和壓縮
3.1. 首先，需要計算出寬高的百分比和離圖片左上角的top和left的百分比。同樣根據佈局不同，計算方式不同。
//獲取width和height的百分比var