Zoom de imagem com Canvas

[jsmoraes]

Teste de zoom de imagem utilizando Canvas.



A instrução drawimage do Canvas tem 8 parâmetros numéricos:
sx,sy,swidth,sheight,x,y,widht,height

sx, sy e swidth e sheight são utilizados para clip da imagem a ser mostrada.

Código Fonte:

<nabble_embed><canvas id="myCanvas" width="800" height="800"></canvas></nabble_embed>

<script type="text/javascript">
myimg = new Image();
myimg.src='https://www.dropbox.com/s/5t7xh0minrpac2w/Pluto04_NewHorizons_1042.jpg?dl=1';
var imgWidth = myimg.width;
var imgHeight = myimg.height;
var kapaX=0.5;
var kapaY=0.5;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//canvas.width = imgWidth * kapaX
//canvas.height = imgHeight * kapaY

var myzoomX = 400;
var myzoomY = 400;
canvas.width = myzoomX;
canvas.height = myzoomY;


myimg.onload = function () {
  ctx.drawImage(myimg,0,0,myzoomX ,myzoomY );
}
// adiciona o evento do mouse whell

if (myimg.addEventListener) {
	// IE9, Chrome, Safari, Opera
	canvas.addEventListener("mousewheel", MouseWheelHandler, false);
	// Firefox
	canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
function MouseWheelHandler(e) {

	// cross-browser wheel delta
	var e = window.event || e; // old IE support
	var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // retorna +1 ou -1 

myzoomX= myzoomX +  (30 * delta);
myzoomY = myzoomX;
canvas.width = myzoomX;
canvas.height = myzoomY;

  ctx.drawImage(myimg,0,0,myzoomX ,myzoomY );
    e.preventDefault(); // impede que haja movimentação scroll da página
//    e.stopPropagation();
//    saveEventState(e);
//return false;

}
</script>
<style type="text/css">
      canvas { border: 2px solid red; background: #eee; 
cursor:url(http://astronomia-e-astrofotos.1069742.n5.nabble.com/file/n2214/lupa.cur), zoom-in}
</style>