search

ailon / markerjs2

Add image annotation to your web apps.
https://markerjs.com
Other
142 stars 39 forks source link

Resize underlying canvas size according to `markerArea.renderWidth` and `markerArea.renderHeight` resolution (same as the image natural dimensions) #136

Open Himujjal opened 1 year ago

Himujjal commented 1 year ago

For a certain implementation, I need to get the rendered final annotated image with a size that matches the resolution of the image rather than the resolution of the img.height and img.width.

Currently, the annotations work wrt to the size of the image in the DOM and not its natural dimensions.

I have tried using renderAtNaturalSize and renderWidth/renderHeight. It doesn't work.

Rendered Image:

Screenshot 2023-01-06 at 6 41 19 PM

Desired Image:

Screenshot 2023-01-06 at 6 42 28 PM

ailon commented 1 year ago

Please elaborate on what you mean by renderAtNaturalSize doesn't work. Because it does work, as far as I can tell :)

Also, I'm not sure I understand the question/statement in the title. If you mean you want to create annotations at the natural image size rather than how it's displayed on your page, then I guess you have an option of creating a copy of your image in desired dimensions and then open marker.js on that.

Himujjal commented 1 year ago

Is it not possible to create annotations at the natural image size without having a copy in desired dimensions? This image that I am displaying is created using renderState and read-only from the original image.

I think many would love to have this feature.

ailon commented 1 year ago

As I mentioned, could you please elaborate or rephrase what you are trying to do and what isn't working. To be honest, I don't really grasp the problem.

Here's a quick demo of rendering at natural size that works perfectly fine for me: https://codesandbox.io/s/marker-js-2-render-at-natural-size-wcgl37