移動端h5頭像上傳、頭像裁切、上傳圖片
初步想的步驟是這樣的:
一、點選頭像區域選擇本地圖片
二、顯示被選本地圖片顯示裁剪選取框
三、確認選取後,上傳到阿里雲返回路徑
四、初始點選區域顯示裁剪完成的圖片
程式碼片段
<div align="center" class="face">
<img src="images/pic06.jpg">/*預設頭像*/<pre name="code" class="html"> <form name="form0" id="form0" >/*選取本地圖片的input 相對於face盒子定位、寬高100% 透明度0*/
</form> </div> 提前準備好剪下層的盒子樣式和排版<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"> </span><input type="file" name="file0" id="file0" multiple="multiple" /><br></span>
以上截圖右側內容僅供參考,具體程式碼就是下面這一點,其他的盒子都是外掛自己生成的,排版無需新增<img alt="大笑" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif" />
<div class="img-container"> <img id="img0" src=""> <div class="close qxooo" >取消</div> <div class="saveBtn">選取</div> </div>
<img class="newImg" src="">
頁面需要引入
<script src="common/js/jquery.js"></script>/*jquery的包*/
<script src="js/imagecropper.js"></script>/*圖片裁剪的外掛*/
<script type="text/javascript">
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
$('.cropper-canvas img').attr('src',objUrl);
$('.cropper-view-box img').attr('src',objUrl);
}
var File=$('#img0').attr('src');
if(File!=''||File==undefined){
$('.img-container').show();
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$('.close').click(function(){
$('.img-container').hide();
})
function convertToData(url, canvasdata, cropdata, callback) {
var cropw = cropdata.width; // 剪下的寬
var croph = cropdata.height; // 剪下的寬
var imgw = canvasdata.width; // 圖片縮放或則放大後的高
var imgh = canvasdata.height; // 圖片縮放或則放大後的高
var poleft = canvasdata.left - cropdata.left; // canvas定點陣圖片的左邊位置
var potop = canvasdata.top - cropdata.top; // canvas定點陣圖片的上邊位置
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
canvas.width = cropw;
canvas.height = croph;
var img = new Image();
img.src = url;
img.onload = function() {
this.width = imgw;
this.height = imgh;
// 這裡主要是懂得canvas與圖片的裁剪之間的關係位置
ctx.drawImage(this, poleft, potop, this.width, this.height);
var base64 = canvas.toDataURL('image/jpg', 1); // 這裡的“1”是指的是處理圖片的清晰度(0-1)之間,當然越小圖片越模糊,處理後的圖片大小也就越小
callback && callback(base64) // 回撥base64字串
}
}
$(function(){
var $image = $('.img-container > img');
$image.on("load", function() { // 等待圖片載入成功後,才進行圖片的裁剪功能
$image.cropper({
aspectRatio: 1 / 1 // 1:1的比例進行裁剪,可以是任意比例,自己調整
});
})
// 點選儲存
$(".saveBtn").on("click", function() {
var src = $image.eq(0).attr("src");
var canvasdata = $image.cropper("getCanvasData");
var cropBoxData = $image.cropper('getCropBoxData');
convertToData(src, canvasdata, cropBoxData, function(basechar) {
// 回撥後的函式處理
$(".newImg").attr("src", basechar);
// 上傳圖片獲取連結
ajaxpubilc("/file/downloadBase64Img",{base64Img:basechar},$ajaxPOST, function (data) { /*介面作用是利用base64解碼並建立臨時圖片檔案在下載在本地*/
if (data.success) {
var url = data.data;
// 儲存頭像地址
ajaxpubilc("/member/info/saveMemberImageUrl",{imgUrl:url},$ajaxPOST, function (res) {/*通過臨時檔案上傳檔案到阿里雲獲取圖片連結*/
if(res.success == true && res.code == 0) {
window.location.href='changeInformation3.html';
}else{
alert("伺服器繁忙");
}
});
} else {
alert("伺服器繁忙");
}
});
});
})
})
</script>
備註:ajaxpubilc方法原始碼封上
function ajaxpubilc(url,data,posttype,callback){
var loginrel= $ajaxurl+'/'+'login.html';
if(data==undefined){
data = {};
}
data["access_token"]=tooken;
$.ajax({
url:$ajaxurl+url,
type:posttype, /*$ajaxPOST*/
dataType:'json',
data:data,
success: function(msg){
callback(msg);
},
error:function(msg){
var data = jQuery.parseJSON(msg.responseText);
if(data.error==undefined){
alert(msg);
}else{
if(msg.status==401){
$.removeCookie("access_token");
window.location='loginnew.html'
}
}
}
})
}
/*攻城獅部落格不定期更新,有錯誤會及時更正如有不同見解,請在下方評論。。。,如果採納,請點贊哦*/