Hi. We have an issue we're needing fixed to move forward. The clients site allows users to upload images and rotate. We're making it more user friendly by providing an expected experience with the image centering in the canvas for edit.
Our trouble is centering the image in the canvas and making the editor responsive.
My dev notes below:
Image issue problem:
Till now what I've done:
earlier the size was setting up static. I set dynamic in SourceImage.js->setImage in state and used in Image in render method.
for getting images small in area. i've set scale accordingly. [login to view URL] -> 104,105
to remove edit photo, I've changed in common/[login to view URL] I pass one props as full width. changed component accordingly.
now for bigger canvas area we do have static height and width, We need to make it dynamic with some logic.
Right now I've set 1080, earlier it was 400.
and to set image center in canvas area. we've to implement some logic which should work fine with dynamic resize for canvas and image size.
so now there are two issues as below:
1) make canvas size dynamic, you can use 'resize' event listener for that. (HERE WE CAN'T USE '90VH' BECAUSE LATER WE CALCULATE OTHER THINGS ON THIS)
2) need to set image in center in canvas area. now need to implement logic which works fine with dynamic size of canvas and image.
If you need more info let me know
please respond with the words I Know React as your first words to be considered.