手機端頭像上傳前端壓縮

2021-08-02 03:59:07 字數 1669 閱讀 9950

壓縮方法

$.fn.uploadheader=function(fun) else 

}//使用canvas修正的方向

var canvas=document.createelement('canvas');

canvas.width=width=drawwidth;

canvas.height=height=drawheight;

var context=canvas.getcontext('2d');

//判斷方向,重置canvas大小,確定旋轉角度,iphone預設的是home鍵在右方的橫屏拍攝方式

switch(dir)

//使用canvas旋轉校正

degree&&context.rotate(degree*math.pi/180);//安卓沒有獲取旋轉角度

context.drawimage(this,0,0,drawwidth,drawheight);

//返回校正

next(canvas.todataurl("image/png"));

}image.src=img;

}filechooser.onchange = function()

files.foreach(function(file, i) );

reader.onload = function() );

};reader.readasdataurl(file);

})};

function loadimg(data)

//載入完畢之後進行壓縮,然後上傳

if (img.complete) else

function callback() }}

function compress(img) else

canvas.width = width;

canvas.height = height;

//鋪底色

ctx.fillstyle = "#fff";

ctx.fillrect(0, 0, canvas.width, canvas.height);

//如果畫素大於100萬則使用瓦片繪製

var count;

if ((count = width * height / 1000000) > 1)

}} else

//進行最小壓縮

var ndata = canvas.todataurl('image/jpeg', 0.3);

tcanvas.width = tcanvas.height = canvas.width = canvas.height = 0;

return ndata;}})

}

使用的是64位的上傳,所以介面也得是64位的

$(function(),

datatype:'json',

type: 'post',

beforesend: function() ,

success: function(odata, statustext) else

},error:function(data),complete:function()

});});

})

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

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

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

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

php實現手機拍照上傳頭像功能

現在手機拍照很火,那麼如何使用手機拍照並上傳頭像呢?原因很簡單,就是資料傳遞,首先手機傳遞 資訊,這個就不是post傳遞 也不是get函式傳遞,設計流程就是 globals http raw post data 傳遞 資料流 二進位制 開啟一張空白圖 把資料流寫進空白裡面 判斷是否是有效 完成。注意...