利用画布实现新浪微博头像截取和上传功能

最近看到微博头像上传功能很有意思，所以我写了一个画布，这篇文章不好，请见谅。这个程序目前在谷歌浏览器和火狐浏览器中都有，IE浏览器也不能支持它。
由于IE的安全机制不允许IMG使用本地路径，所以如果IE支持的程序，它必须上传图片和上传图片地址img对象。
我没有在这里写，因为我暂时没有写上传功能的后台代码，也不知道是否有更好的解决方案。

下面是新浪网
以下是我所做的截取部分
代码uff1a
VaR的画布document.getelementbyid（'canvas），
背景canvas.getcontext（会），
画布document.getelementbyid（'canvas_dp），
背景canvas.getcontext（会），
图像=新的图像（）， / / document.getelementbyid（'myimg），
图像数据，
缩放比例
rubberbandrectangle = {左：，上：，宽度，高度：}，
调整=；
oldrubberbandrectangle = { }；
拖动=假，
扩展=假，
mousedown = { }；
/ /功能.....................................................
功能windowtocanvas（帆布，x，y）{
无功canvasrectangle = canvas.getboundingclientrect（）；
返回{
X：X canvasrectangle.left，
Y：Y canvasrectangle.top
}；
}
截取小画布上的图片
功能capturecanvaspixels（）{
context.drawimage（图像，rubberbandrectangle。左 /规模，rubberbandrectangle。顶/规模，rubberbandrectangle。宽度/规模，rubberbandrectangle。身高 /规模，，）。
}
功能drawrubberband（）{
context.save（）；
（上下文。调用）； / /开始一个新的路径
矩形（rubberbandrectangle.left，
RubberbandRectangle.top，
RubberbandRectangle.width，
RubberbandRectangle的身高）；
背景。fillStyle = 'rgba（、、、。）；
AddRectanglePath（）；
（上下文填充）；填充路径
背景。fillStyle = 'rgba（，，，）；
（capturecanvaspixels）； / /将选择预览拷贝图像的画布
Context.beginPath（）；
context.strokestyle =#；
context.linewidth =。；
context.arc（rubberbandrectangle。左+ rubberbandrectangle.width，rubberbandrectangle。顶+ rubberbandrectangle。高度、数学。π*，真的）；
（上下文填充）；填充路径
（上下文.笔划）；填充路径
context.restore（）；
}
（X，Y，矩形函数W，H，方向）{
如果（方向）{逆时针方向}
Context.moveTo（x，y）；
Context.lineTo（X，Y + H）；
Context.lineTo（X + Y + W，H）；
Context.lineTo（x + W，Y）；
}，否则顺时针方向
Context.moveTo（x，y）；
Context.lineTo（x + W，Y）；
Context.lineTo（X + Y + W，H）；
Context.lineTo（X，Y + H）；
}
Context.closePath（）；
}
功能addrectanglepath（）{
矩形（，，canvas.width，canvas.height，真的）；
}
功能startdragging（LOC）{
MouseDown。x = x LOC；
MouseDown。Y Y LOC；
oldrubberbandrectangle.left = rubberbandrectangle.left；
oldrubberbandrectangle.top = rubberbandrectangle.top；
}
功能updaterubberbandrectangle（LOC）{
VaR左= oldrubberbandrectangle.left + LOC。x-mousedown X；
var = oldrubberbandrectangle.top +禄。Y Y鼠标；
rubberbandrectangle.left =（左<）：左；
rubberbandrectangle.top =（顶<）：顶；
如果（rubberbandrectangle.left + rubberbandrectangle.width > image.width *规模）rubberbandrectangle.left = image.width *规模rubberbandrectangle.width；
如果（rubberbandrectangle.top + rubberbandrectangle.height > image.height *规模）rubberbandrectangle.top = image.height *规模rubberbandrectangle.height；
DrawRubberband（）；
}
功能startextendselection（LOC）{
MouseDown。x = x LOC；
MouseDown。Y Y LOC；
oldrubberbandrectangle.width = rubberbandrectangle.width；
oldrubberbandrectangle.height = rubberbandrectangle.height；
}
功能extendselection（LOC）{
VaR的宽度= parseInt（oldrubberbandrectangle。宽）+ parseInt（LOC。x）- parseInt（MouseDown。x）；
VaR高度= parseInt（parseInt（oldrubberbandrectangle。高度）×parseInt（宽）/ parseInt（oldrubberbandrectangle。宽度））；
rubberbandrectangle.width =宽度；
rubberbandrectangle.height =高度；
DrawRubberband（）；
}
功能clearrubberbandrectangle（）{
context.clearrect（，canvas.width，帆布，高度）；
context.putimagedata（影像数据，）；
}
事件处理程序............................................... /
canvas.onmousedown =功能（e）{
E.preventDefault（）；
无功禄= windowtocanvas（帆布，e.clientx，e.clienty）；
如果（rubberbandrectangle.left LOC。X（rubberbandrectangle.top + rubberbandrectangle。高度）> LOC。Y）{
拖动=真；
startdragging（LOC）；
} else if（（rubberbandrectangle.left + rubberbandrectangle.width -）禄。X（rubberbandrectangle.top + rubberbandrectangle.height +）> LOC。Y）{
扩展=真；
startextendselection（LOC）；
}
}
canvas.onmousemove =功能（e）{
E.preventDefault（）；
无功禄= windowtocanvas（帆布，e.clientx，e.clienty）；
如果（rubberbandrectangle.left LOC。X（rubberbandrectangle.top + rubberbandrectangle。高度）> LOC。Y）{
帆布，光标= 'move风格；
} else if（（rubberbandrectangle.left + rubberbandrectangle.width -）禄。X（rubberbandrectangle.top + rubberbandrectangle.height +）> LOC。Y）{
帆布，光标= 'nw-resize风格；
其他{ }
画布。样式；
}
如果（拖动）{
ClearRubberbandRectangle（）；
UpdateRubberbandRectangle（LOC）；
}
如果（扩展）{
帆布，光标= 'nw-resize风格；
ClearRubberbandRectangle（）；
extendselection（LOC）；
}
}
canvas.onmouseup =功能（e）{
E.preventDefault（）；
拖动=假；
扩展=假；
}
/ /初始化..............................................
无功myfileinput = document.getelementbyid（'myfileinput）；
myfileinput。onchange =函数（）{
西雅图（myfileinput）；
}；
功能setImage（fileobj）{
如果（fileobj.files fileobj。文件{ }）{
火狐浏览器，谷歌支持
image.src = window.url.createobjecturl（fileobj。文件{ }）；
{人}
警报（对不起，您的浏览器不支持）；
}
}
image.src =；
image.onload =函数（）{
console.log（图像）；
无功功率；
图片缩放/计算
如果（图像宽度>画布宽度）{
console.log（）；
W = canvas.width；
H =帆布。宽*高/ image.width图像。
否则如果（图像高度>画布高度）{
console.log（）；
H = canvas.height；
W =帆布。高度*宽度/ mage.height图像。
} else if（图像宽度/ image.height =画布宽度/帆布。高度）{
console.log（）；
W = canvas.width；
H =帆布。宽*高/ image.width图像；
} else if（图像宽度/ image.height <画布宽度/帆布。高度）{
console.log（）；
W =帆布。高度*宽度/ image.height图像。
H = canvas.height；
}
规模= W / image.width；
context.clearrect（，，canvas.width，帆布，高度）；
context.drawimage（图像、W、H）；
console.log（W +：+ H + # # # +帆布。宽度+ '：' +帆布。高度）；
数据= context.getimagedata（canvas.width，帆布，高度）；
DrawRubberband（）；
}；
HTML

carlzhang


以上代码非常简单，附有注释，有不同意见的朋友，欢迎给我留言，共同交流学习进度。为了更了解画布头图像的截取和上传，请大家继续关注本站，本站每天都有新内容更新。