Automatically crop image to set x + y values

1

Hi all,

I’m trying to crop an image in hype to a set x and y value within that image.

My aim is to load an image into hype and press a button which will take a set area of that image and display it within the webpage.

does anyone have any ideas of how this can be created?

Thanks,

Chris

2

I am not sure what your final goal is… Hype can’t crop images but if you only want to mask images you can group an image and set overflow to hidden. Your image would need to be set offset -x, -y and the group width to the width and height.

If you want to create a “real” cropping (tool) on runtime then look at https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/canvas and drawImage etc.

2 Likes
3

Bild
FC757796-067B-4E83-8E68-18317A266BDD.png2732×2048 2.45 MB

3 Likes
4

In need the image to be actually cropped as I’m using it with a OCR reader afterwards so I’ll needed to look at the second option. Thanks for all you help though :slight_smile:

5

Thats pretty much what @MaxZieb is pointing you to. You can laod an image into a canvase and crop it using the created canvase propeties.

Have a look at the link he posted..

Also just remembered I wrote a quick example of using canvas from a Device camera.