Zoom
function clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() {
clear();
if (bMouseDown) {
ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);
ctx.globalCompositeOperation = 'destination-atop';
ctx.beginPath();
ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
}
function imageZoom(el) {
// выборка картинки по ИД
image = document.getElementById(el);
// создание canvas
canvas = document.createElement('canvas');
canvas.width = image.clientWidth;
canvas.height = image.clientHeight;
ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.clientWidth, image.clientHeight);
// добавление canvas напротив картинки
image.parentNode.appendChild(canvas);
image.style.display = "none";
iZoomPower = 2, iZoomRadius = 100, bMouseDown = false;
canvas.onmousemove = function(e){
var canvasOffset = canvas.getBoundingClientRect();
iMouseX = Math.floor(e.pageX - canvasOffset.left);
iMouseY = Math.floor(e.pageY - canvasOffset.top);
}
canvas.onmousedown = function() {bMouseDown = true;};
canvas.onmouseup = function() {bMouseDown = false;};
setInterval(drawScene, 1000/30);
}
imageZoom("imageId"); // <img src="pic.jpg" id="imageId">
Авторизуйтесь, чтобы добавлять комментарии