guoyingtao / Mantis

An iOS Image cropping library, which mimics the Photo App written in Swift.
MIT License
921 stars 183 forks source link

CropView have cropProps pass #407

Closed rahul6350 closed 2 months ago

rahul6350 commented 3 months ago

Hi @YingtaoGuo , Simulator Screenshot - iPhone 15 Pro - 2024-07-23 at 12 33 54 Simulator Screenshot - iPhone 15 Pro - 2024-07-17 at 23 42 36

My issue is that suppose in the print preview page of the two image other than cropview page second page, firstly we need to Edit and crop the view with certain rotation or without rotation ,and save it the.api call and we send the rotationdegree and cropprops(which is topx., topy, bottomx, bottomy) the backend cropthe image and we preview it the second preview page means backend send the cropped image url. then we select suppose intial is square then we change it to Album then backend always send the cropprops which they changes from square to album or any print size change we need to use this croprops when edit the view to the cropview, we need use this cropprops to see the cropview so we and backend in the same flow. But currently i have on crop saved the transformation then edit then present the transformation as we discussed earlier using cropviewpresent type function can make a struct which contain cropprops and rotation degree every time we update they backend send this but we need to use this struct cropprops(topx, topy , bottomx, bottomy), and rotationdegree when edit to see the view func cropProps( info: CropInfo) -> CropProps { return CropProps(topX: Int(info.cropRegion.topLeft.x info.originalPixels.width), topY: Int(info.cropRegion.topLeft.y info.originalPixels.height), bottomX: Int(info.cropRegion.bottomRight.x info.originalPixels.width), bottomY: Int(info.cropRegion.bottomRight.y info.originalPixels.height)) } this is for cropprops please provide PR to get this , can you do today this is on urgent basis how can we use that

guoyingtao commented 3 months ago

@rahul6350 It is really hard for me to understand your real purpose. Can you format your post to make it easier to read? Also what is cropviewpresent type? Mantis doesn't use this type currently.

rahul6350 commented 3 months ago

In the print preview process, we handle images across multiple pages, specifically focusing on the interaction between the crop view and the preview page. Initially, when a user edits and crops an image, they can apply a certain rotation or no rotation at all. Once the image is edited, we save these details and make an API call, sending the rotation degree along with cropping properties (cropProps), which include coordinates: topX, topY, bottomX, and bottomY. The backend uses these details to crop the image and sends back a URL for the cropped image, which we display on the second preview page.

If the user changes the print format from an initial square to another format, such as an album, the backend recalculates and returns updated cropProps reflecting these changes. We must use these updated cropProps to maintain synchronization between the backend and our front-end view, ensuring the crop view is consistent with the backend's processing.

Currently, when a crop is saved, the transformation is retained for future edits. Using the cropViewPresent function, we maintain a struct that contains both cropProps and the rotation degree. This struct is updated whenever the backend sends new data. By employing this struct, we can effectively utilize the cropProps (topX, topY, bottomX, bottomY) and rotation degree to render the crop view accurately during editing. Below is a function that converts a CropInfo instance to CropProps:

func cropProps(_ info: CropInfo) -> CropProps { return CropProps( topX: Int(info.cropRegion.topLeft.x info.originalPixels.width), topY: Int(info.cropRegion.topLeft.y info.originalPixels.height), bottomX: Int(info.cropRegion.bottomRight.x info.originalPixels.width), bottomY: Int(info.cropRegion.bottomRight.y info.originalPixels.height), rotationDegree: info.rotationDegree // Assuming rotationDegree is a property of CropInfo ) }cropviewpresenttype means in example project there is function presentcropview in which we present on the basis of transformation

rahul6350 commented 3 months ago

Hi @guoyingtao in simple words When we crop the image we have saved the Transformation on edit we use this saved Transformation then crop region is shown as in presentWithPresetTransformation this function. But the thing is that suppose func cropProps(_ info: CropInfo) -> CropProps { return CropProps(topX: Int(info.cropRegion.topLeft.x info.originalPixels.width), topY: Int(info.cropRegion.topLeft.y info.originalPixels.height), bottomX: Int(info.cropRegion.bottomRight.x info.originalPixels.width), bottomY: Int(info.cropRegion.bottomRight.y info.originalPixels.height)) } when we crop the image and on the basis of cropping we sent the cropProps which is topx topy bottomx bottomy to backend and backend crop the image on the basis of it suppose we use this cropProps to the cropArea instead of transformation saving can we do that for so on edit exact cropprops set to image and inside the cropbox crop region contain with complete image so basically instead of transformation struct we have topx topy bottomx bottomy cropprops then can we do that as we are doing transformation does please add and reply as soon as possible

guoyingtao commented 3 months ago

@rahul6350 If the image is rotated, are topX, topY based on the original image or the rotated image?

rahul6350 commented 3 months ago

on the basis of rotation because we send the rotation degree to the backend then backend rotate on the basis and send topx topy bottomx bottom y please do it i need it in urgent basis i did not understand in mantis how can i do that i basically only use transformation saving way presentWithPresetTransformation in this function which has but now same behaviour want topx topy bottomx bottom y on tha basis

rahul6350 commented 3 months ago

means rotated image

guoyingtao commented 3 months ago

For rotation, it looks like your app only uses angles like 90, 180, 270 etc. Is my understanding correct?

guoyingtao commented 3 months ago

@rahul6350 If no any rotation, you can use PresetTransformationType.presetNormalizedInfo(You may need to build normalized data based on the cropProps (topX, topY, bottomX, bottomY) If any rotation happened, we have more work to do which may need to add a new type of PresetTransformationType or update the current presetNormalizedInfo type.

guoyingtao commented 3 months ago

@rahul6350 Please try PR #408 to see if it works for you. You can set Config.cropViewConfig.presetTransformationType = .presetNormalizedInfo when you want to edit the image again after receiving cropProps and rotation data from your backend. Also you need to build normalized crop info based on the cropProps (topX, topY, bottomX, bottomY) and set ImageRotationType based on your actual rotation. For example, if the image size is 100 * 200(after rotation) and cropProps is (10, 40, 90, 160), then the normalized crop info should be CGRect(x: 0.1, y: 0.2, width: 0.8, height: 0.6)

rahul6350 commented 3 months ago

how can we convert suppose topx topy bottomx bottom y to normalize info which is CGRect please if no rotation then how can we do that please tell step by step

rahul6350 commented 3 months ago

backend send the cropprops how can we convert to CGrect for normalize info

rahul6350 commented 3 months ago

need to paas CGRECT in presentNormalizeinfo so suppose TOPX topy bottomx bottom y is from backedn then how can convert cgrect and what is cgrect in this so we can paas

guoyingtao commented 3 months ago

@rahul6350 Just did some tests for PR #408 and found some issues. Still need some time to solve them.

rahul6350 commented 3 months ago

but can you need to paas CGRECT in presentNormalizeinfo so suppose TOPX topy bottomx bottom y is from backedn then how can convert cgrect and what is cgrect in this so we can paas explain

rahul6350 commented 3 months ago

please explain once resolve the issues

guoyingtao commented 3 months ago

@rahul6350 The normalized data can be built like below

  1. create a CGRect based on cropProps (topX, topY, bottomX, bottomY)
  2. divide origin.x and width in CGRect by image.width and divide origin.y and height in CGRect by image.height to make sure every value in CGRect is >= 0 and <= 1
guoyingtao commented 3 months ago

I updated PR #408 and solved issues I found. You can have a try to see if it works for you.

rahul6350 commented 3 months ago

func normalizeCropInfo(cropProps: CropProps, imageSize: CGSize) -> CGRect { // Calculate the origin and size of the crop rectangle let originX = cropProps.topX / imageSize.width let originY = cropProps.topY / imageSize.height let width = (cropProps.bottomX - cropProps.topX) / imageSize.width let height = (cropProps.bottomY - cropProps.topY) / imageSize.height

// Create and return a normalized CGRect
return CGRect(x: originX, y: originY, width: width, height: height)

} is this correct

rahul6350 commented 3 months ago

not working

rahul6350 commented 3 months ago

no transormation on edit occur of the image

rahul6350 commented 3 months ago
 if let printId = printId,  let transform = cropFrameManager.savedTransFormation[printId], let cropProps = cropConfig.cropProps {
        let createrect = normalizeCropInfo(cropProps: cropProps, imageSize: image.size)

        config.cropViewConfig.presetTransformationType = .presetNormalizedInfo(normalizedInfo: createrect ?? .zero)
    }    func normalizeCropInfo(cropProps: CropProps, imageSize: CGSize) -> CGRect {
    // Calculate the origin and size of the crop rectangle
    let originX = CGFloat(cropProps.topX ?? .zero) / imageSize.width
    let originY = CGFloat(cropProps.topY ?? .zero) / imageSize.height
    let width = CGFloat(cropProps.bottomX ?? .zero) - CGFloat(cropProps.topX ?? .zero)  / imageSize.width
    let height = (CGFloat(cropProps.bottomY ?? .zero) - CGFloat(cropProps.topY ?? .zero) ) / imageSize.height

    // Create and return a normalized CGRect
    return CGRect(x: originX, y: originY, width: width, height: height)
}in this way we create but it is wrong previously when present info paas and use that saved tranformation it works but in this when use cgrect on the basis of cropprops not work can you pleasee explain how can i do that where iam wrong?
rahul6350 commented 3 months ago

Hey @guoyingtao rotation not working in this flow without rotation working fine but in rotation suppose i rotate one time in clockwise direction so roationType is counterclockwise270 but after transform and paasing this roationtype in edit it will rotate to 180 same when 180 rotation it will roate to .none angle is not correct[I think zoom is not working or scale when cropping with zoom to pa particular limit or extent then save and edit it will not zoom to that instant on paasing cropprops or on cropping suppose zoom and after edit not zooming to that instant because of that extra spacr shows which is not correct same exact image is shown when zooming i think scale is not calculated, but in presentinfo correct zoom on edit on this transformation to the same extent]

guoyingtao commented 3 months ago

@rahul6350 I tested by using Example project and it worked fine. I can't tell the why it doesn't work for your case but looks like it calculated with the saved transformation and presetNormalizedInfo. Also can you format your posts to make it easier to read?

rahul6350 commented 3 months ago

@guoyingtao scaling in without roation is the issue when cropping ans zooming to and extent in the cropview then on edit when presentNormalize paas the cropProps it does not scale or zoom to that level due to which extra things are shown in the cropbox area and on rotation backend send the roationdegree 90, 270, 0 , 180 which is Int on the basis of it we need to roatate but in without roattion and roation case scaling is the issue not zoomed to that instant

rahul6350 commented 3 months ago

Can you provide the code where you tested because cropprops passing is fine but scale zooming i say this the issue because we do not adjust scale in this i think that why

guoyingtao commented 3 months ago

Below is the video for counterclockwise270

 config.cropViewConfig.presetTransformationType = .presetNormalizedInfo(normalizedInfo: CGRect(x: 0.1, y: 0.2, width: 0.8, height: 0.7), imageRotationType: .counterclockwise270)

https://github.com/user-attachments/assets/46a1e336-acfb-45de-9f46-a50346e7edd7

guoyingtao commented 3 months ago

@rahul6350 You can modify function presentWithPresetTransformation in ViewController in Example project and use some code like below (You need to comment out config.cropViewConfig.presetTransformationType = .presetInfo(info: transform))

config.cropViewConfig.presetTransformationType = .presetNormalizedInfo(normalizedInfo: CGRect(x: 0.1, y: 0.2, width: 0.8, height: 0.7), imageRotationType: .counterclockwise270)
rahul6350 commented 3 months ago

Can you zoom to the crop area then edit then on edit zooming not to that level i cant share the video video is too loarge not sharable error that why

rahul6350 commented 3 months ago

IMG_0794 IMG_0795 IMG_0792 IMG_0793 can you check these 4 screen shots on preview page have cropped image from backend when crop and rotate and when backend send the cropprops and rotationtype then on edit these are the two image usign presentnormalizeinfo huge diffrenece in without rotation it is not zooming to that instant due to which extra things space inside the box is show and roation is 270 but on edit rotation is 180 type i dont know

rahul6350 commented 3 months ago

please available need to close help me out

guoyingtao commented 3 months ago

I don't quite understand the cropping logic of your backend server. In Mantis, after rotating the image, the image scale will change to adapt the editing view but the cropping region is kept the same.

https://github.com/user-attachments/assets/dc6d86f5-0594-400d-891d-a890170183a6

rahul6350 commented 3 months ago

No backend serve the cropping logic of google photos but on presentransform it will scale or zoom to that level , because when cropping i save the whole tranofrmation strut in cropout and on edit it use it will correctly zoom to that level but in this it is not i dont know why and roation is also work fine in presentinfo tranformation logic please check zoom or scaling

guoyingtao commented 3 months ago

If you only want to restore the image editing status based on the data returned from the backend server or Google photos, you don't need to save the whole transformation which is for rotating any angles. I see in your case, you only rotate degrees like 90, 180, 270 etc, right?

rahul6350 commented 3 months ago

I think can you do the scaling or zooming are you understand what iam tried to say can you look at two image in preview and edit page withour roattion extra margins or things in edit not scale to that extent

guoyingtao commented 3 months ago

You mentioned if no rotation, it works fine. Is the scale also correct if no rotation?

rahul6350 commented 3 months ago

If you only want to restore the image editing status based on the data returned from the backend server or Google photos, you don't need to save the whole transformation which is for rotating any angles. I see in your case, you only rotate degrees like 90, 180, 270 etc, right?

yes but when backend not serve the cropprops and rotationdegree when we cropping we saved the whole transformation and use that tranformation in presentInfo and pass the save tranformation it work fine zooming scaling but in this when backend serve cropprops in presentnormalizeinfo when paas cgrect scaling or zooming not working can you skip the rotation part currently zooming and scaling to that instant. not work in without rotation firstly

rahul6350 commented 3 months ago

You mentioned if no rotation, it works fine. Is the scale also correct if no rotation?

the main problem scale is not correct my main point is this in rotation as well in without rotation scale is not correct before in present info when saved transformaiton it is correct in presentnormalizeinfo it is not correct

rahul6350 commented 3 months ago

cropprops is correct to that tranform but scale is not

rahul6350 commented 3 months ago

please explain how can we solve this

guoyingtao commented 3 months ago

Hi @rahul6350 Can you use some tool like ChatGPT to format your post, it is a little hard for me to follow you since no punctuations in your post.

rahul6350 commented 3 months ago

When the backend does not provide cropProps and rotationDegree, we save the entire transformation during cropping and use that transformation in presentInfo. Passing the saved transformation works fine for zooming and scaling.

However, when the backend provides cropProps, we use presentNormalizedInfo, and when passing a CGRect, the scaling or zooming does not work properly.

Can you skip the rotation part, currently focusing on zooming and scaling? Without rotation, the zooming and scaling should work instantly.

rahul6350 commented 3 months ago

Scale is not correctly work in without rotation are you understand ?

rahul6350 commented 3 months ago

pls explain

guoyingtao commented 3 months ago

Is the cropping region correct if the scale is not correct?

rahul6350 commented 3 months ago

yes cropping region is correct

rahul6350 commented 3 months ago

is this solved?

guoyingtao commented 3 months ago

Can you post two images (They have the same cropping region) and one is with correct scale (calculated with saved transformation data), the other one with wrong scale(calculated with presentNormalizedInfo)? It can help me understand the issue better. Thanks.

rahul6350 commented 3 months ago

sure

guoyingtao commented 3 months ago

Also if you don't zoom manually and only crop the image, is the scale correct when using presentNormalizedInfo?

rahul6350 commented 3 months ago

yes when zoom manually then incorrect otherwise correct