Canvas玩转图像处理_技术问答

慕虎0392284

谷歌浏览器不支持onmousemove吗: 支持的呀; 2020-04-01 1回答·1026浏览

JeAioTime

我的代码实现不了放大效果: 已采纳沐oo音的回答; 要找一张比画布大的图片才可以看出效果; 2018-07-20 1回答·1205浏览

DangCode

为什么getBoundingClientRect函数获得的left总是不对啊

getBoundingClientReact是获得元素相对与游览器视窗的left、top、right、bottom的值

2017-08-12 1回答·2391浏览

qq_奋斗的我_03498945

sx,sy,dx,dy不理解

关于canvas的sx,sy理解，理解了这个后就理解dx,dy:

用户在第一个canvas上点击获得一个位置ux,uy。
需要在第二个canvas获得sx,sy，
需要理解你要在第二个canvas 中获取一个区域，这个区域大小就是2倍的mr,那么这个mr的左上角坐标怎么获得，就是sx=ux*scale-mr,宽度就是2*mr
在第一个canvas显示这个放大镜
context.drawImage(第二个canvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr)

2016-12-21 2回答·2189浏览

qq_颗粒_0

不能出现放大镜效果。

已采纳柠檬萌不萌的回答

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:0 auto;"></canvas>

<canvas id="offCanvas" style="display:none"></canvas>


<div style="margin:20px auto;text-align:center;">点击更换放大镜边框颜色：
<a href="#" onclick="colorGreen()" style="color:green">绿色</a>
<a href="#" onclick="colorRed()" style="color:red">红色</a>
<a href="#" onclick="colorBlue()" style="color:Blue">蓝色</a>
<a href="#" onclick="colorRandom()" style="color:#909">随机</a>
</div>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

var offCanvas=document.getElementById("offCanvas");
var offContext = offCanvas.getContext("2d");


var image =new Image();
var isMouseDown =false;//鼠标是否点击
var scale; //放大倍数
var color="#666";//放大镜颜色

window.onload= function(){
  canvas.width = 1152
            canvas.height = 768



image.src="img.jpg"
image.onload=function(){
offCanvas.width =image.width;
offCanvas.height = image.height;
scale = offCanvas.width / canvas.width;

context.drawImage(image,0,0,canvas.width,canvas.height);

  offContext.drawImage(image,0,0);
}
}

//坐标转换
function windowToCanvas(x,y){
//获得canvas的包围盒
var bbox = canvas.getBoundingClientRect();
return {x:x-bbox.left,y: y -bbox.top}
drawCanvasWithMagnifier( true, point);
}
    //鼠标点击事件
canvas.onmousedown =function(e){
e.preventDefault()

var point =windowToCanvas(e.clientX,e.clientY); //鼠标点击位置
console.log(point.x,point.y);
isMouseDown =true;
drawCanvasWithMagnifier( true, point);


}

//点击鼠标左键同时移动鼠标事件
canvas.onmousemove =function(e){
e.preventDefault()//禁止默认响应事件
if( isMouseDown ==true){
var  point = windowToCanvas(e.clientX,e.clientY)
console.log(point.x,point.y);

drawCanvasWithMagnifier( true, point);
}
}
  //鼠标松开事件
canvas.onmouseup =function(e){
e.preventDefault()//禁止默认响应事件
isMouseDown =false;

drawCanvasWithMagnifier(false);
}
//鼠标离开canvas画布事件
canvas.onmouseout =function(e){
e.preventDefault()//禁止默认响应事件
isMouseDown =false;

drawCanvasWithMagnifier( false);
}
//是否绘制放大镜
function drawCanvasWithMagnifier( isShowMagnifier , point ){

            context.clearRect( 0 , 0 , canvas.width , canvas.height )
            context.drawImage( image , 0 , 0 , canvas.width , canvas.height )
            if( isShowMagnifier == true ){
                drawMagnifier( point )
            }
        }

function drawMagnifier(point){
//图片放大之后的坐标
var imageLG_cx = point.x* scale 
var imageLG_cy = point.y* scale

var mr = 200 //放大镜的半径
//放大镜的起始坐标
var sx = imageLG_cx - mr;
var sy = imageLG_cy - mr;

var dx = point.x - mr;
var dy = point.y - mr;
context.save();
context.lineWidth= 10.0;
context.strokeStyle=color;
context.beginPath();
context.arc(point.x,point.y,mr,0,2*Math.PI);
context.stroke();

context.clip();

context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);

context.restore();
}


function colorRed(){

color="red";

}

function colorGreen(){
color="green";
}

function colorBlue(){
color="blue";
}
function colorRandom(){
var color1=Math.ceil(Math.random()*255);
   var color2=Math.ceil(Math.random()*255);
var color3=Math.ceil(Math.random()*255);
color="rgb("+color1+","+color2+","+color3+")";

}
</script>
}
</body>
</html>

你可以参考下

2016-10-18 2回答·1768浏览