修改頭像圖片這個功能相信大家都玩過城瞎，選擇圖片->移動框選擇圖片范圍->確認(rèn)拳魁，頭像就修改成功了。今天簡單教大家實(shí)現(xiàn)這個功能狐血！
首先我們先簡單布一下局统倒！
html代碼如下:
<button class="changehead">更改頭像
<div id="changeBox">
? ? <div class="changeBox-center">
? ? ? ? <div class="changeBox-left">
? ? ? ? ? ? <img class="demoImg">
? ? ? ? ? ? <div class="chooseBox">
? ? ? ? <div class="changeBox-right">
? ? ? ? ? ? <canvas id="myCan" width="120" height="120">
? ? ? ? ? ? <input type="file" class="but1">
? ? ? ? ? ? <button class="but2">截取
? ? ? ? ? ? <button class="but3">保存
? ? ? ? ? ? <button class="but4">取消
</div>
css代碼如下:
#changeBox{
width:100%;
? ? height:100%;
? ? position:fixed;
? ? display:none;
? ? left:0;
? ? top:0;
? ? background:rgba(51,51,51,0.6);
}
.changeBox-center{
width:600px;
? ? height:300px;
? ? margin:100px auto 0;
? ? position:relative;
}
.changeBox-left{
width:300px;
? ? height:300px;
? ? float:left;
? ? position:relative;
}
.demoImg{
width:300px;
? ? height:300px;
}
.chooseBox{
width:120px;
? ? height:120px;
? ? border:1px solid blue;
? ? position:absolute;
? ? left:1px;
? ? top:1px;
}
.changeBox-right{
width:300px;
? ? height:300px;
? ? float:right;
? ? background:#fff;
}
#myCan{
display:block;
? ? margin-left:90px;
}
.but1,.but2,.but3,.but4{
display:block;
? ? margin:20px auto 0;
}
選擇圖片
$('.changehead').click(function () {
$('#changeBox').show();
})
var myCan=document.getElementById('myCan');
var ctx=myCan.getContext("2d");
var demoImg=document.getElementsByClassName('demoImg')[0];
$('.but1').change(function () {
var file=$('.but1')[0].files[0];
? ? var reader=new FileReader();
? ? reader.onload=function (e) {
$('.demoImg').attr('src', e.target.result);
? ? };
? ? reader.readAsDataURL(file);
});
限制選擇框的移動范圍
var chooseBox=document.getElementsByClassName('chooseBox')[0];
chooseBox.onmousedown=function (e) {
var x=e.offsetX;
? ? var y=e.offsetY;
? ? document.onmousemove=function (e) {
var l=e.clientX-383-x;
? ? ? ? var t=e.clientY-100-y;
? ? ? ? if(l<0)l=0;
? ? ? ? if(l>178)l=178;
? ? ? ? if(t>178)t=178;
? ? ? ? if(t<0)t=0;
? ? ? ? chooseBox.style.left=l+'px';
? ? ? ? chooseBox.style.top=t+'px';
? ? }
document.onmouseup=function () {
document.onmousemove=false;
? ? ? ? document.onmouseup=false;
? ? }
}
將選擇框內(nèi)的圖片截取到畫布上
$('.but2').click(function () {
var w=parseFloat(demoImg.naturalWidth/300);
? ? var h=parseFloat(demoImg.naturalHeight/300);
? ? var x=$('.chooseBox').position().left*w;? ? ? ??
? ? var y=$('.chooseBox').position().top*h;
? ? ctx.drawImage(demoImg,x,y,120*w,120*h,0,0,120,120);
})
demoImg.naturalWidth為圖片的原始寬高！
w和h是圖片的寬高和顯示框的比值氛雪。
ctx.drawImage這個方法參數(shù)較多房匆，詳情請參考MDN！
我們將截取的圖片打印出來看一下是這個樣子报亩，只顯示部分：
這就是圖片的base64格式浴鸿！
存至數(shù)據(jù)庫：
$('.but3').click(function () {
$.ajax({
url:'/Dphoto',
? ? ? ? data:{
? ? ? ? ? ? id:1,
? ? ? ? ? ? src:myCan.toDataURL()?
},
? ? ? ? success:function (res) {
? ? ? ? ? ? ?console.log(res);
? ? ? ? }
})
})
后臺接收id與src存至數(shù)據(jù)庫，這里省略.
結(jié)尾：
可以在數(shù)據(jù)庫看到弦追，圖片的base64格式已經(jīng)存進(jìn)了數(shù)據(jù)庫：
這里值得一提的是：在創(chuàng)建表時岳链。u_img這個字段的字段類型需要是longtext,不然會存不進(jìn)去！
在取數(shù)據(jù)的時候只要讓img標(biāo)簽的src屬性等于這個base64數(shù)據(jù)即可顯示出圖片劲件！
