Drawing on top of a Image

[rinovethamoses97]

How to draw on top of the image so that drawing is part of the image and not a separate object. Can someone help me in this

[asturur]

You can create a group between the image and the free drawing.

[rinovethamoses97]

@asturur Yes but when I download the image only images is getting downloaded and not the drawings. Also when I crop the image only image gets cropped. I found a solution using CloneAsImage but that decreases the quality of the image and changes all the properties. Any help?

[kalnode]

Do you have any code to share? Otherwise people would just be guessing about your situation. What you describe could have many causes based on your own app logic.

[asturur]

Guys if you want help for your custom cases, you have to provide a working example of where you are at.

[rinovethamoses97]

I was trying to create a Chrome Extension which takes ScreenShot of the Webpage. I need two functionality. First one is cropping the image, which I am able to achieve. Second one is allowing users to draw on the screenshot before they download. I was able to draw using DrawingMode but when I try to crop the Images after that It only crops the Images and not the drawings. Any Solution Would Help. Code is available in https://github.com/rinovethamoses97/Snipper

[asturur]

there are many things you can do: restrict your canvas view on the image only, and export the canvas to image using toDataUrl or toCanvasElement and then using the toBlob extensions of native canvas.

Or you can take the group between image and drawing and use cloneAsImage or use Group.toDataURL, Group.toCanvasElement.

[rinovethamoses97]

cloneAsImage decreases the image quality. Also properties gets changed

[asturur]

the only quality loss you incur into are the one from jpeg compression.

Please just make a fiddle with the picture and the free drawing on top of it if you want to get help.

I m not coding a whole example alone

[rinovethamoses97]

@asturur JSFiddle link https://jsfiddle.net/rinovethamoses97/8jt5z2x4/13/ In this Example First Click "Draw Mode Toggle" and Draw Something and then Click ""Group And Clone(for Testing)" to Group and Clone the Group as Image. After Group is Cloned, the Cloned Images will be rendered to the Canvas and You could see the Mild Quality Decrease in the Image when Compared with the Original One. Please Help.

[asturur]

I think you linked an older version of the fiddle.

[rinovethamoses97]

Oops Sorry https://jsfiddle.net/rinovethamoses97/8jt5z2x4/latest/ This is the Latest One. Thanks!!.

[asturur]

https://jsfiddle.net/1Lxnog0u/1/

So this is the logic i applied. Clone as image is fine, but scaling will affect the dimension of clone and so quality. We have an option: withoutTransform (is in the docs...) that will let you clone forgetting rotation and scaling. That will take in account only the group scaling, since you scale the image inside, at this point isn't working for us.

So what i did is:

a moment before grouping save image scale. Group everything as you did. Then scale the group by 1 / imageScale. the group becomes larger/smaller and image gets 1:1 pixel. Destroy the group! this will make the image unscaled, the path grow or shrink, but everything is in the position it should be. Group everything again, and clone it as an image, quality should be no loss now.

Add the resulting image back to the canvas, with the original scale factor.

Let me know if you still see a quality loss. If you see it, bring evidence of what are you loosing with screenshot please,

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.