We are facing image issue with our code in react native application. We have put image in our react native code with Image tag in code. We have set size - height and width of the image to 150, let’s say. Our problem is that when I reduce the height of the image to 100 it crops the image from both top and bottom. While as per our need we want image to be cropped it from only bottom. Below is the sample code and output of the code we have written.
For Example, We have put one image with width and height of 150 as per the below code, and we are getting the output as per the right side of the window.
(Image (i) ) ( https://ibb.co/CJjc4SP )
Now, when we set height of the image to 100, it crops the image from both top and bottom. While as per our need we want image to be cropped only from bottom. Please refer below code snippet and output for the same.
(Image (ii) ) ( https://ibb.co/FhZ1gxh )
Further explaining the example, Image 1 below is the image that we are using in our code with height 150. When we reduce its height to 100, Image gets cropped from both top and bottom as per the Image 2. While we want output image to be cropped from only bottom as per the Image 3. Please refer below images for the same.
Original Image (1) - ( https://ibb.co/JRzk1T8 )
Cropped output Image (2) - When we reduce image height from 150 to 100, Image
gets cropped from both top and bottom as per the image. - ( https://ibb.co/GJkW7PX )
Expected Output Image (3) – While we want image to be cropped only from
bottom as per the above image. - ( https://ibb.co/jZkdHhw )
We have multiple images in our project. So please give proper resolution accordingly. - ( https://ibb.co/nPD4JvQ )
Is there any way we can crop image from only bottom when applying reduced size height? Or by applying any other props or attribute?
Kind Regards,
Uday
Related
I have 2 pictures, need to combine them horizontally. I know numpy and cv2(opencv) should help me to do this. But don't know how.
I used img1 = cv2.imread(file1), img2 = cv2.imread(file2)
the 2 images' shape are (2048, 1334, 3) and (720, 1200, 3)
How could I do this? when I open These 2 images, they have similar height, different width.
I only know if the 2 pics have the same size, then just use concate, but my 2 pics are different sizes.
For the final output, I want to have them keep their own width, height choose the biggest/smallest...
So I imagine the final output should maybe 2/3 width one picture, 1/3 width the other pic which is totally good. I don't need these 2 are evenly distributed. Just keep their own width. Thanks!
You need to either trim a bit of the bottom of the taller image or add some black pixels.
In order to trim a part of the image, you can do:
trimmed = image2[:image1.shape[0],:,:]
This keeps only the lines from 0 up to the height of image1.
Or, you can add some black pixels:
black = np.zeros(image1.shape[0] - image2.shape[0], image1.shape[1])
image2 = np.hstack(image2, black)
And then you vertically concatenate.
I just solved my question.
Basically use cv2.resize()function to resize the images
Then simply concatenate them horizontally or vertically.
Just change the axis.
img1 = cv2.imread('xxx.png')
img2 = cv2.imread('yyy.jpg')
then compare img1.shape() and img2.shape()
Use resize()function to make them width the same or height the same.
vis = np.concatenate((img1, img2), axis=1)
cv2.imwrite('out.png', vis)
given the url(image) below as an example
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_220,y_140/yellow_tulip.jpg
From what I understand, the first image yellow_tulip is drawn on (0, 0) which is the top left corner. The second image brown_sheep draws from (220, 140), which is the right bottom corner of yellow_tulip because (0, 0) starts from top left of canvas.
Everything makes sense from what I understand til the third image kicks in. horses also starts from (220, 140) but how come it starts from the center of second image brown_sheep? I'm really confused.
The dimensions of the image changes when you apply the overlay changes so that should be taken into consideration when applying the x and y coordinates.
The coordinates are calculated from the center of the image but since the size of the canvas in the first image is 220 by 140, setting the brown sheep overlay's coordinates to 220 by 140 will double the size of the canvas to 440 by 280.
Meaning the following URL is now 440 by 280 https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill/yellow_tulip.jpg
To now overlay the horsed over the brown sheep you will need to recalculate the dimensions to the following- https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_110,y_70/yellow_tulip.jpg
Or
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_330,y_210/yellow_tulip.jpg
I don't think this is possible out of the box but wanted to make sure.
We'd like to do the following.
Take any image input and force the output width to be a fixed size. If the width is less than the output width, we'd like to center the image and add horizontal padding to the image but not add vertical padding.
For example
Original image is 700px x 400px
Final output size of 1000px width x 400px. This would include 150px padding left and 150px padding right (no top / bottom padding).
I know that we can upscale the image (scale=both) or set the canvas scale (but that adds top / bottom padding) or we could add padding to the image but none are really what we want.
Thanks for any help
Response to Nathanael
Your comments are exactly correct.
I expected http://z.zr.io/ri/red-leaf.jpg?width=1000&scale=canvas&bgcolor=gray to work exactly as it does
Yes, our problem is that the image heights are not known beforehand, but it's good to know that this works with a known height
I think it would be great if there was a command for scale=padwidth that would work with variable heights. Or a setting for padwidth=true and padheight=false that could be used in conjunction with scale=canvas.
So, let's say that you're given an 800x600px image, and you apply ?width=1000&scale=canvas. You were expecting that this would produce a 1000x600px image, but instead it produced a 1000x750px image, right?
http://z.zr.io/ri/red-leaf.jpg?width=1000&scale=canvas&bgcolor=gray
If you specify the height explicitly, the padding goes away - but you may not know the image height beforehand, correct?
http://z.zr.io/ri/red-leaf.jpg?width=1000&scale=canvas&bgcolor=gray&height=600
What would be the least surprising behavior - maintaining aspect ratio, or only adding the minimum padding required? How would you expect this to behave, or be exposed as a command?
I am developing an app that will show flags for countries some places, but after looking at flags I realized that the flags format was different for almost every country. Therefor I would like the height of the image view to automatically adjust it self to the width i set. Example:
Standard width for all flags: 100 px
USA : Height: 50px
UK: Height 56 px
Russia: Height 34px
I have no idea how to solve this, thanks for help! The best would be if this could be done automatically - without me needing to create example arrays or something for every flag to adjust size.
This is a ratio problem. Suppose your English flag is 120x80px. You want it to be 100px wide. How tall will it be? You have to scale the width and height by the same ratio.
First of all, calculate the ratio between the desired width of the flag and its actual width:
CGFloat ratio = 100.0f / 120.0f;
That gives us a ratio of 0.83. Now we can calculate the display height by multiplying the actual height by the ratio:
CGFloat height = 80.0f * 0.83;
The display height is 66.4px.
Here's the neat thing: UIImageView does this for you. If you specify the width of the image view and set its content mode to UIViewContentModeScaleAspectFit it does the hard work automatically.
See this question:
How to scale a UIImageView proportionally?
You could set the size of the image view from the size of the image as follows:
UIImage* flagImage = [UIImage imageNamed:"flagimage.png"];
CGRect flagImageRect = flagImageView.frame;
flagImageRect.size = flagImage.size;
flagImageView.frame = flagImageRect;
flagImageView.image = flagImage;
I guess you would do the above in a loop where you are setting the flag images for all your image views. You could also take the opportunity to scale your images (if desired).
I searched and tried the troubleshooting faqs but can't see a reference to the problem I'm having.
I have the following presets in the resizer section my web.config:
name="kbp600w" defaults="w=600;h=600;mode=max;anchor=MiddleCenter;watermark=kbp600"
name="kbp600" defaults="w=600;h=600;anchor=MiddleCenter;bgcolor=FEF2E1;watermark=kbp600"
name="kbp300" defaults="w=300;h=300;anchor=MiddleCenter;bgcolor=FEF2E1;watermark=kbp300"
I generate my images with the following urls (I generate three different images using the same file):
picture.jpg?preset=kbp600w
picture.jpg?preset=kbp300
picture.jpg?preset=kbp600
So, here's the thing:
The first URL works fine and does everything defined in the preset.
The second URL also works fine and does everything defined in the preset.
The third URL works fine when the image width is larger than the height (landscape), but when the height is the largest dimension (portrait) it resizes the height correctly but the width dimension does not get padded to fill the 600px width but instead becomes whatever size is calculated to maintain the aspect ratio. I need it to always have dimensions of 600 x 600 with padding either on the top and bottom or sides with the appropriate background color for the padding.
Am I doing something wrong?
https://gist.github.com/anonymous/5672886
Use mode=pad and scale=canvas (or scale=both) to always get exactly the requested dimensions.
Without scale=both or scale=canvas, an image < 600x600 in either dimension won't be upscaled or padded.
P.S. Anchor=MiddleCenter is the default, so you don't need to specify that.