效果如下
这里最重要的就是rubberbandEnd这个函数 它会判断鼠标从按下到松开 有没有位移过 如果没有就return 最后把离屏的图片选取局部复制到可见的canvas之中
代码如下
<!DOCTYPE html>
<html>
<head>
<title>图像与视频</title>
<meta charset="utf-8">
<style type="text/css">
*{padding: 0;margin: 0}
a{text-decoration: none}
img{border: none}
ul,ol{list-style: none}
br{font-size: 0;line-height: 0;clear: both}
body{text-align: center;background: rgba(100,145,250,0.3)}
canvas{border: 1px solid blue}
#scaleSlider{
vertical-align: 10px;
width: 100px;
margin-left: 90px;
}
#canvas{
margin:10px 20px 0px 20px;
border: thin solid #aaaaaa;
cursor:crosshair;
}
#controls{
margin-left: 15px;
padding: 0
}
#scaleOutput{
position: absolute;
width: 60px;
height: 30px;
margin-left: 10px;
vertical-align: center;
text-align:center;
color: blue;
font:18px Arial;
text-shadow: 2px 2px 4px rgba(100,140,250,0.8)
}
</style>
</head>
<body>
<div id='controls'>
<input type='button' id='resetButton' value='Reset'/>
</div>
<canvas id="canvas" id="canvas" width="454" height="512"></canvas>
</body>
</html>
<script type="text/javascript">
console.log("start")
var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")
var offscreenCanvas=document.createElement("canvas") //创建离屏canvas
var offscreenContext=offscreenCanvas.getContext("2d")
offscreenCanvas.width=canvas.width
offscreenCanvas.height=canvas.height
var mousedown={}
var rubberbandRectangle={}
var dragging=false;
var start_data;
context.fillStyle='rgba(155,187,89,0.3)'
context.lineWidth=2
function windowToCanvas(canvas,x,y){
var bbox=canvas.getBoundingClientRect()
return {
x:x-bbox.left,
y:y-bbox.top
}
}
function rubberbandStretch(x,y){
rubberbandRectangle.left=Math.min(x,mousedown.x)
rubberbandRectangle.top=Math.min(y,mousedown.y)
rubberbandRectangle.width=Math.abs(x-mousedown.x)
rubberbandRectangle.height=Math.abs(y-mousedown.y)
context.fillRect(rubberbandRectangle.left+context.lineWidth,
rubberbandRectangle.top+context.lineWidth,
rubberbandRectangle.width-2*context.lineWidth,
rubberbandRectangle.height-2*context.lineWidth)
}
function rubberbandEnd(x,y){
if(x==rubberbandRectangle.left||y==rubberbandRectangle.top){
dragging=false;
return
}
context.clearRect(0,0,canvas.width,canvas.height)
context.drawImage(offscreenCanvas,rubberbandRectangle.left+context.lineWidth*2,
rubberbandRectangle.top+context.lineWidth*2,
rubberbandRectangle.width-4*context.lineWidth,
rubberbandRectangle.height-4*context.lineWidth,
0,0,canvas.width,canvas.height)
offscreenContext.drawImage(canvas,0,0,canvas.width,canvas.height)
dragging=false;
}
canvas.onmousedown=function(e){
var loc=windowToCanvas(canvas,e.clientX,e.clientY) //获取鼠标点击在canvas的坐标
e.preventDefault()
mousedown.x=loc.x
mousedown.y=loc.y;
rubberbandRectangle.left=mousedown.x
rubberbandRectangle.top=mousedown.y
dragging=true
}
canvas.onmousemove=function(e){
var loc
if(dragging){
context.clearRect(0,0,canvas.width,canvas.height)
context.drawImage(offscreenCanvas,0,0,canvas.width,canvas.height) //把离屏canvas上的数据复制到当前canvas
loc=windowToCanvas(canvas,e.clientX,e.clientY)
rubberbandStretch(loc.x,loc.y) //计算出选中的矩形坐标
}
}
canvas.onmouseup=function(e){
var loc=windowToCanvas(canvas,e.clientY,e.clientY)
rubberbandEnd(loc.x,loc.y) //鼠标抬起 开始从离屏canvas复制数据
}
resetButton.onclick=function(e){
dragging=false;
context.clearRect(0,0,canvas.width,canvas.height)
context.putImageData(start_data,0,0)
offscreenContext.putImageData(start_data,0,0)
}
function start(){
var src="./timg.jpg"
var img=new Image()
img.src=src
window.onload=function(){
context.drawImage(img,0,0,canvas.width,canvas.height)
start_data=context.getImageData(0,0,canvas.width,canvas.height) //记录初始数据以备还原使用
offscreenContext.drawImage(img,0,0,offscreenCanvas.width,offscreenCanvas.height) //离屏canvas储存图像
}
}
start()
</script>
