언어 설정

Menu
Sites
Language
How to zoom in and out canvas background image?

Hi,

I am working on Photo editing app. I am displaying canvas image by clicking the picture from camera or by choosing the image from gallery. How can I resize canvas image or how can I zoom in or out canvas image? Thanks.

목록

Responses

8 댓글
Seoghyun Kang

Hello,

 

I recommend you refer the following url. You can see the source code at the page.

ex) http://phrogz.net/tmp/canvas_zoom_to_cursor.html

var zoom = function(clicks){
 var pt = ctx.transformedPoint(lastX,lastY);
 ctx.translate(pt.x,pt.y);
 var factor = Math.pow(scaleFactor,clicks);
   ctx.scale(factor,factor);
 ctx.translate(-pt.x,-pt.y);
}

 

They are using the scale() method. If you want to see the example of the "scale", please refer the following page.

http://www.w3schools.com/tags/canvas_scale.asp

 

Thanks.

 

 

 

Vikram

Hi,

Above link is good sample and you can also use two button and add event listener to implement zoom in and zoom out on image to increase and decrease the size of canvas. Although this is not the best way.

// add button event listeners
document.getElementById("plus").addEventListener("click", function(){
    draw(1.2);             
}, false);

document.getElementById("minus").addEventListener("click", function(){
    draw(0.8);
}, false);

and define the function draw()

function draw(scale){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.scale(scale, scale);
    context.drawImage(image, 0 , 0 , canvas.width, canvas.height);
}

 

Shweta Thakar

Hi Vikarm,

Thanks for the reply. I am using same method for zoom in and out but I am facing one problem with this solution. Every time it creates new image while zoom in and out. So In my app I have different color effect options to edit an image. Now once user will select an image from gallery it will display on the canvas and then user applies different color options and then click on the zoom in and out button then that image is reset with the original image. I want to apply zoom in and out with original image. Appreaciate your help. Thanks.

Palitsyna

Hello,

use scale() method to zoom in and zoom out canvas. Here you can find more information about this:  http://www.w3schools.com/tags/canvas_scale.asp you can also find there an example of how to use this method.
Also, I suggest you to visit similar topics: https://developer.tizen.org/forums/web-application-development/zoom-canvas?tab=active and https://developer.tizen.org/forums/web-application-development/how-resize-canvas-using-javascript.?tab=active

Hope this will help you.

Palitsyna

Hello,

use scale() method to zoom in and zoom out canvas. Here you can find more information about this:  http://www.w3schools.com/tags/canvas_scale.asp you can also find there an example of how to use this method.
Also, I suggest you to visit similar topics: https://developer.tizen.org/forums/web-application-development/zoom-canvas?tab=active and https://developer.tizen.org/forums/web-application-development/how-resize-canvas-using-javascript.?tab=active

Hope this will help you.

AVSukhov

Hello,

May be this third-party library helps you:

http://bl.ocks.org/mbostock/3681006

Alex Dem

Hi,just fyi, something similar:

https://developer.tizen.org/forums/web-application-development/how-zoom-image-inside-canvas
https://developer.tizen.org/forums/web-application-development/scale-and-move-image

Alexey.

Palitsyna

Hello,

just FYI, there is some more related topics:

https://developer.tizen.org/forums/web-application-development/how-set-size-canvas-according-div-size-tizen?tab=active

https://developer.tizen.org/forums/web-application-development/how-zoom-image-inside-canvas?tab=active

May be this will help you