How to make a simple zoom?

Question

Java Script

Answer 1

transform.scale(2); /* size times 2 */
transform.scale(0.5); /* size divided by 2 */

Answer 2

here is a nice implementation to scale a specific area

http://stackoverflow.com/questions/3448347/how-to-scale-an-imagedata-in-html-canvas

the following function to be exact:

function scaleImageData(imageData, scale) {
var scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale);
var subLine = ctx.createImageData(scale, 1).data
for (var row = 0; row < imageData.height; row++) {
for (var col = 0; col < imageData.width; col++) {
var sourcePixel = imageData.data.subarray(
(row * imageData.width + col) * 4,
(row * imageData.width + col) * 4 + 4
);
for (var x = 0; x < scale; x++) subLine.set(sourcePixel, x*4)
for (var y = 0; y < scale; y++) {
var destRow = row * scale + y;
var destCol = col * scale;
scaled.data.set(subLine, (destRow * scaled.width + destCol) * 4)
}
}
}

return scaled;
}

let say you want to scale a specific area in the canvas:

imgData=context.getImageData(x,y,areaWidth,areaHeight);

scaledArea=scaledImageData(imgData, 2);

context.putImageData(scaledArea,x,y);

this will result in the original image with a given area which is now magnified x2

only works as magnifying rectangle tho... i am trying some modifications to make it a circle (magnifying glass) with no much luck yet xD

Answer 3

uses a magnifier

Answer 4

by using transform.scale in css3 you can make zooming in or out.

Answer 5

use transform.scale(x) css property to enlarge element to x times
such as transform.scale(3) means enlarge element three times