Zoom de imagem centralizado no Canvas

[jsmoraes]

Este código permite zoom da imagem centralizada em um Canvas.
Em outro código a instrução de getElmentById é substituído por getElementByTagName('canvas') [0]



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");
var myzoomX = 400;
var myzoomY = 400;
//canvas.width = myzoomX
//canvas.height = myzoomY
// calcula posição central no canvas
centroX = (canvas.width - myzoomX)/2;
centroY = (canvas.height - myzoomY)/2;
myimg.onload = function () {
  ctx.drawImage(myimg,centroX,centroY,myzoomX ,myzoomY);
}
// adiciona o evento do mouse whell

if (canvas.addEventListener) {
	// IE9, Chrome, Safari, Opera
	canvas.addEventListener("mousewheel", MouseWheelHandler, false);
	// Firefox
	canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else canvas.attachEvent("onmousewheel", MouseWheelHandler);

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)));

myzoomX= myzoomX + (30 * delta);
if (myzoomX < 30){myzoomX=30}
myzoomY = myzoomX;
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();
centroX = (canvas.width - myzoomX)/2;
centroY = (canvas.height - myzoomY)/2;
 ctx.drawImage(myimg,centroX,centroY,myzoomX ,myzoomY);
    e.preventDefault(); // impede que haja movimentação scroll da página
	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>