修改头像图片这个功能相信大家都玩过，选择图片->移动框选择图片范围->确认，头像就修改成功了。今天简单教大家实现这个功能！
首先我们先简单布一下局！
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;
}
}
将选择框内的图片截取到画布上
$('.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这个方法参数较多，详情请参考MDN！
我们将截取的图片打印出来看一下是这个样子，只显示部分：
这就是图片的base64格式！
存至数据库：
$('.but3').click(function () {
$.ajax({
url:'/Dphoto',
data:{
id:1,
src:myCan.toDataURL()
},
success:function (res) {
console.log(res);
}
})
})
后台接收id与src存至数据库，这里省略.
结尾：
可以在数据库看到，图片的base64格式已经存进了数据库：
这里值得一提的是：在创建表时。u_img这个字段的字段类型需要是longtext,不然会存不进去！
在取数据的时候只要让img标签的src属性等于这个base64数据即可显示出图片！
网友评论