react-native-photo-editor
react-native-photo-editor copied to clipboard
prscX
Picture in Landscape get cut
Hello and thank you for this amazing library. If the picture that I take is in portrait, so with a height bigger than the width, and I try to edit this image in a landscape, the image get cut.
Do you have any solutions for that? or block the orientation if it possible?. thanks
If I can advise something, an easier solution and better result. Block the orientation. At the moment that you receive the media, check width and height and you block orientation to landscape or portrait. That`s what i have done. This will solver the problem of the cut, but also when you modify a portrait image in a landscape, the edit does not get totally f**k up
I am working on my fixes, if I get good results then I will send a pr to fix this
Hello @hamzaouhssain1993. We are having this issue as well on Android devices mainly. When the user start annotating in portrait and then rotate the device, it looses all the annotations. We are planning to block the orientation as well, and for that, we are gonna create a fork, Did you find any other workaround o do you have any hint on how to block the orientation? Thanks
Hello! @scblason in Android in PhotoEditorActivity.java on the onCreate i added this:
if (bitmap.getWidth() > bitmap.getHeight()) {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
this.portrait = false;
} else {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
this.portrait = true;
}
this.setSizesImage(bitmap);
after seems a bit a lot but in the method seiSizeImage, I had to fix the layout size depending on the orientation and specifically to make fit the image in the device screen.
public void setSizesImage(Bitmap bitmap) {
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
float heightScreen = displayMetrics.heightPixels;
float widthScreen = displayMetrics.widthPixels;
float ratioScreen = heightScreen / widthScreen;
float imagewidth = (float)bitmap.getWidth();
float imageHeight = (float)bitmap.getHeight();
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
float ratioImage = imageHeight / imagewidth;
if (this.portrait) {
if (ratioImage > ratioScreen) {
float increaseSize = heightScreen / imageHeight;
int newWidth = (int) (increaseSize * imagewidth);
photoEditImageView.getLayoutParams().height =(int)heightScreen; // LayoutParams: android.view.ViewGroup.LayoutParams
photoEditImageView.getLayoutParams().width = newWidth;; // LayoutParams: android.view.ViewGroup.LayoutParams
parentImageRelativeLayout.getLayoutParams().height = (int)heightScreen;
parentImageRelativeLayout.getLayoutParams().width = newWidth;
this.finalHeight = (int)heightScreen;
this.finalWidth = newWidth;
} else {
float increaseSize = widthScreen / imagewidth;
int newHeight = (int) (increaseSize * imageHeight);
photoEditImageView.getLayoutParams().height = newHeight; // LayoutParams: android.view.ViewGroup.LayoutParams
photoEditImageView.getLayoutParams().width = (int)widthScreen; // LayoutParams: android.view.ViewGroup.LayoutParams
parentImageRelativeLayout.getLayoutParams().height = newHeight;
parentImageRelativeLayout.getLayoutParams().width = (int)widthScreen;
this.finalHeight = newHeight;
this.finalWidth = (int)widthScreen;
}
photoEditImageView.requestLayout();
} else {
if (ratioImage > ratioScreen) {
float increaseSize = heightScreen / imageHeight;
int newWidth = (int) (increaseSize * imagewidth);
photoEditImageView.getLayoutParams().height =(int)heightScreen; // LayoutParams: android.view.ViewGroup.LayoutParams
photoEditImageView.getLayoutParams().width = newWidth;; // LayoutParams: android.view.ViewGroup.LayoutParams
parentImageRelativeLayout.getLayoutParams().height = (int)heightScreen;
parentImageRelativeLayout.getLayoutParams().width = newWidth;
} else {
float increaseSize = widthScreen / imagewidth;
int newHeight = (int) (increaseSize * imageHeight);
photoEditImageView.getLayoutParams().height = newHeight; // LayoutParams: android.view.ViewGroup.LayoutParams
photoEditImageView.getLayoutParams().width = (int)widthScreen; // LayoutParams: android.view.ViewGroup.LayoutParams
parentImageRelativeLayout.getLayoutParams().height = newHeight;
parentImageRelativeLayout.getLayoutParams().width = (int)widthScreen;// LayoutParams: android.view.ViewGroup.LayoutParams
}
photoEditImageView.requestLayout();
}
}
Hello! @scblason in Android in PhotoEditorActivity.java on the onCreate i added this:
if (bitmap.getWidth() > bitmap.getHeight()) { setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); this.portrait = false; } else { setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); this.portrait = true; } this.setSizesImage(bitmap);after seems a bit a lot but in the method seiSizeImage, I had to fix the layout size depending on the orientation and specifically to make fit the image in the device screen.
public void setSizesImage(Bitmap bitmap) { DisplayMetrics displayMetrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); float heightScreen = displayMetrics.heightPixels; float widthScreen = displayMetrics.widthPixels; float ratioScreen = heightScreen / widthScreen; float imagewidth = (float)bitmap.getWidth(); float imageHeight = (float)bitmap.getHeight(); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); float ratioImage = imageHeight / imagewidth; if (this.portrait) { if (ratioImage > ratioScreen) { float increaseSize = heightScreen / imageHeight; int newWidth = (int) (increaseSize * imagewidth); photoEditImageView.getLayoutParams().height =(int)heightScreen; // LayoutParams: android.view.ViewGroup.LayoutParams photoEditImageView.getLayoutParams().width = newWidth;; // LayoutParams: android.view.ViewGroup.LayoutParams parentImageRelativeLayout.getLayoutParams().height = (int)heightScreen; parentImageRelativeLayout.getLayoutParams().width = newWidth; this.finalHeight = (int)heightScreen; this.finalWidth = newWidth; } else { float increaseSize = widthScreen / imagewidth; int newHeight = (int) (increaseSize * imageHeight); photoEditImageView.getLayoutParams().height = newHeight; // LayoutParams: android.view.ViewGroup.LayoutParams photoEditImageView.getLayoutParams().width = (int)widthScreen; // LayoutParams: android.view.ViewGroup.LayoutParams parentImageRelativeLayout.getLayoutParams().height = newHeight; parentImageRelativeLayout.getLayoutParams().width = (int)widthScreen; this.finalHeight = newHeight; this.finalWidth = (int)widthScreen; } photoEditImageView.requestLayout(); } else { if (ratioImage > ratioScreen) { float increaseSize = heightScreen / imageHeight; int newWidth = (int) (increaseSize * imagewidth); photoEditImageView.getLayoutParams().height =(int)heightScreen; // LayoutParams: android.view.ViewGroup.LayoutParams photoEditImageView.getLayoutParams().width = newWidth;; // LayoutParams: android.view.ViewGroup.LayoutParams parentImageRelativeLayout.getLayoutParams().height = (int)heightScreen; parentImageRelativeLayout.getLayoutParams().width = newWidth; } else { float increaseSize = widthScreen / imagewidth; int newHeight = (int) (increaseSize * imageHeight); photoEditImageView.getLayoutParams().height = newHeight; // LayoutParams: android.view.ViewGroup.LayoutParams photoEditImageView.getLayoutParams().width = (int)widthScreen; // LayoutParams: android.view.ViewGroup.LayoutParams parentImageRelativeLayout.getLayoutParams().height = newHeight; parentImageRelativeLayout.getLayoutParams().width = (int)widthScreen;// LayoutParams: android.view.ViewGroup.LayoutParams } photoEditImageView.requestLayout(); } }
Thanks a lot for your response!
my man @scblason i forgot to share our fork.. you can try and see if it works for you :D https://www.npmjs.com/package/fleetback-react-native-photo-editor
my man @scblason i forgot to share our fork.. you can try and see if it works for you :D https://www.npmjs.com/package/fleetback-react-native-photo-editor
Thank you very much! This fork has only changes mentioned in this thread above? Much appreciated. Do you have an open PR with this changes? I think this could be really useful. But I don't know if this lib is very actively maintained.
Our fork fixes orientation problems for ios and android ( blocking it depending on the image size ). Resizing the image to fit on the phone... adding android erase... and a better design improvements on both ios and android. No the gtihub repository is not open sorry, it is available on NPM, but it can not be opened...