Konva-react Image Crop Functionality - react-konva

I am using konva-react and want to crop my uploaded image in canvas editor. My approach is to show a rectangle on the selected image. when that rectangle is resised, then in onTransformEnd method, I am giving crop object with width, height , x and y as the resized rectangle.
Further If I want to crop more, then I want to show the actual image with reactangle to show the cropped part.
The issue is, when I try to crop second time, it sheo the cropped image and not the actul one. enter image description here

Related

Is it possible to check is an image is a cropped part of other image with google-cloud-vision?

I'm trying to check is the pair of images actually the larger original and the cropped image from it. It is possible to do with google-cloud-vision?

when creating custom map in Highcharts I want to use a background image however the custom map scales differently

enter image description herePer this page (https://www.highcharts.com/docs/maps/custom-maps) I open inkscape, insert an image I want to draw over and then click on "resize page to selected object" with the image selected. This resizes the page to the size of my background image. I then create the shapes over the image as instructed in the page referenced above. What I want to do is when I paste the svg into the highcharts converter it keeps the shapes as drawn on the page so that I can then insert that same picture into the background of my highchart map on the page and the shapes I have drawn fit perfectly where I drew them on the image in inkscape. Instead it seems like the converter resizes the shapes to best fit the screen. If I didn't want the background image then this would be perfect however with this feature all the images drawn no longer "fit" in the background image where I drew them. Any way to get this to be a 1:1 size conversion so that inserting a background image works?

How to change product image window in woocommerce

I am trying to place an image of 400x400 as my product image. But this image appears stretched and blurred. The reason I think is that the default window size of product image is 562x562.On hovering over the image,the actual resolution of the image i.e. 400x400 is visible. So is there any way to change the dimension of window in woocommerce??
Here is the link http://mytalaash.com/product/image-2-2/

MURA: getImageURL small size cuts off the image

The small size creates an image too large to fit in the box. Is there a way by which the image can be wrapped completely?
I am doing
<div class="catimgback">
<img src="#arguments.item.getImageURL(size='arguments.size',width=arguments.width,height=arguments.height)#" alt="#htmlEditFormat(arguments.item.getValue('title'))#" class="catimg" />
</div>
Where arguments.width = 163px; arguments.height=163px; and arguments.size = small
If i make catimgback's style=height:100% then all goes well. Also, I played with keeping the size to be custom and giving custom width and height but could not get the images to work. all the small size images gets cut off.
I think you may be confused as to how getImageURL() works. The only time you need to pass in the height or width arguments, is if you pass in size='custom' or omit the size attribute altogether.
Also, when you use size='custom', the image gets cropped automatically based on the dimensions of the image that's been uploaded. So, in your case, you want a square image ... but what if the image that's been uploaded is not exactly square, maybe it's a rectangle. So, in that case, Mura starts at the very center of the image, then scales out from there to the outer most boundaries. If the image were a vertical rectangle, you can imagine then that the top and bottom parts of the rectangle won't make the cut. Conversely, if the image were a horizontal rectangle, then the left and right edges of the image won't make it into the cut.
What you really want in this case is a pre-defined image size called catimg with a height and width attribute of 163px. To create this:
Go to Site Config > Edit Site from the Admin area
Click the Images tab
Towards the bottom, click Add Custom Image Size
Enter a Name (for example, catimg)
Enter the Height
Enter the Width
Click Save (You now have a custom image size that can be used for any content items)
Go to the Site Manager, and add/edit a content item
If editing an existing content item that already has an image, click the crop marks to get to the Image Details screen. Otherwise, select an image to upload, and Publish.
From the Image Details screen, scroll down to the custom image size you've created, and you can now Re-Crop your image to select your desired image region.
Now, anytime you call getImageURL(size='catimg'), Mura will use this specific image to display.
Cheers!

BitmapData with Scale9Grid

I have a Skin for SkinnableContainer.
Skin contains only the original contentGroup and s:BitmapImage as background.
Background image stretchers out according to width and height content.
The used image is .png with transparent regions.
To create hitarea, I used this algorithm:
http://www.webverwirklichung.com/en/blog/programming/flex/creating-hitarea-png-image-transparent-alpha-regions-flex
Everything's working fine until I start to stretch the SkinnableContainer (along with the image in the skin).
I have a scale9Grid for the image.
The problem is, that when stretching the image, the bitmapData of the image is still the same (same width and height). Therefore I need to somehow obtain the bitmapData of the image for the scale9Grid application.
The background of the component is an image, which has some transparent areas. It is only possible to click on the visible part of the image. The image will stretch according to the content in contentGroup.
Need an advice, please.
How about using the BitmapData.draw() method?
After the container is resized and the 9 slice scaling has been applied (or whatever the appropriate trigger is) do:
var b:BitmapData = new BitmapData(container.width, container.height);
b.draw(container);
Then use this new bitmap with the algorithm that creates the hit area.

Resources