I am using imgAreaSelect.js for image cropping.
Suppose there is an image of a 'rectangle' shape in the middle of the picture. On larger screen (desktop) when I select the rectangle shape, imgAreaSelect gives me its width & height (say 250 x 150 ). While on a smaller screen (mobile phone) it gives me width & height (say 100 x 50).
I use canvas to draw the cropped image on. So far I have been using the width & height obtained during selection as the width & height of the canvas. This produces images whose dimensions are bigger for the bigger screen while smaller for the smaller screens.
Is it possible in any way to get an image of a standard dimension whether it's cropped from a larger or smaller screen? If yes then do explain with some codes if possible. Thanks
Related
I have an image in an SSRS report, and it doesn't seem to be doing "FitProportional" (by which I assume means it will grow or shrink proportionally, depending on the cell size).
FitProportional keeps it small, proportional to the cell size.
Clip clips it to the cell size of the upper left corner of the photo.
Fit stretches the photo out of proportion
AutoSize skews the whole report to the size of a large photograph.
is there an additional setting I can apply to have the photo actually increase or shrink proportional to the cell size? Or should I make sure the photos are already sized properly, before being used by the SSRS report.
Thank you!
Not really an answer but too much to fit in a comment.
I'm not sure what other option you could want other centering, these cover everything else.
AutoSize : Resizes the cell to the size of the image's original size
Fit : stretches and scales the image to fit the cell perfectly, image ratio is no maintained and the image fills the cell.
FitProportial : keeps the image width vs height ratio the same but set the image size to be as wide or tall as possible to fill the cell either vertically or horizontally.
Clip : Anchors the image in the top left corner of the cell. The image is not resized but only the portion of the image that fits within the cell is visible.
If you still think there is something missing, maybe post some screen shots with examples of what you want to achieve.
I've been trying to fix an issue where the full-width hero images on my Wordpress website appear blurry on some mobile devices, and in the process I've noticed that this seems to be triggered only at smaller sizes.
The images I'm using are 1920 x 1080 pixels.
Between a width of 1920px to 1024px the images look high-quality and unchanged as far as I can tell, but using Firefox's Responsive Design Mode, I've established that the smaller the image renders the more progressively blurrier (i.e. pixellated) it becomes.
If the browser window is resized to a width of 1023px or less, it becomes a little blurry, whereby setting the DPR setting to 2 restores it to the original quality.
If the browser window is resized to a width of 512px or less, the image becomes very blurry, and setting the DPR to 3 restores it to the original quality.
What's going on here? I understand that the images aren't Retina-optimised, but if this was the actual cause, wouldn't the problem be reversed - wouldn't it be the larger image size that would render blurry? Shouldn't the smallest image render at a high DPI considering it's being displayed at a size of 512px and the source image is much less than double (2x) the 1920px source image?
Would really appreciate some help figuring this out as I've been struggling with it for a few days and it's very hard to test against and debug.
A HiDPI image is really just one that's larger than the display size but crushed into a smaller physical space.
For example if your 1x image is 500px x 500px, then a 2x image would be 1000px x 1000px and 3x would be 1500px x 1500px. The HiDPI designation comes in because the device is able to display all those extra pixels in the same physical space as a normal screen.
So imagine a normal screen is 100px per 1 inch. So your 500px image would be 5in x 5in. The HiDPI screen might be 200px per 1 inch of screen so the 1000px image would still take up 5 inches.
Typically smaller images get blury on HiDPI displays because they're trying to "up res" something like a 500px x 500px image to a display size of 1500px x 1500px.
As for the problem you're experiencing, have you verified the issue on a real device not the FF emulator? Real devices are usually much better at that "up res" process and may not produce the same artifacts.
Html canvases have max sizes depending on device/browser. Eg some mobiles have roughly a 1000x1000 canvas max. What about images stored in memory? Can these be up to the ram of the phone/pc? Can you 'drawImage' large images to these 1000x1000 canvases where it does auto-cropping? (I don't have a phone to test this even for a specific device.)
The max size of an image object is probably browser or memory dependent.
More to your question...
The image object you draw into the canvas can be larger than the canvas.
This causes the canvas to become a "viewport" into the image.
For example:
Your canvas is 1000x1000.
Your image is 1500x1500.
If you do this then the image pixels will be cropped at x>1000 and y>1000.
// canvas shows image pixels from x=0-999 and y=0-999
drawImage(yourImage,0,0)
If you do this then image pixels will be cropped at x<200 & x>1200 and y<200 and y>1200.
// canvas shows image pixels from x=200-1999 and y=200-1999
drawImage(yourImage,-200,-200)
A mental exercise to see how this works is to imagine a piece of paper with a rectangle "viewport" cut from it. Then move a larger-than-viewport image behind the paper. Only a part of the image will only be visible through the viewport. You can move the image and a different portion of the image will be revealed in the viewport.
I'm having some issues with fluid images when using a max height. I'm trying to bound the image in a box that is at most 450x450 or any arbitrary box thats not in the same aspect ratio as the image. What's happening is that the width of the image is being restricted to 450px but the height is not and the image is overflowing the wrapper div.
my code is:
<div class="wrapper">
<div class="container">
<img src="http://i.imgur.com/iw4yOa0.jpg"/>
</div>
</div>
see http://jsfiddle.net/5fuZ5/ for full code and css.
I know I could achieve this by using jquery but I need a responsive solution that doesn't require javascript.
OK i've got a similar issue and could find nothing to help. My situation is that i have a single column of images that are fluid (fit their container 100% in width) works fine for landscape images but portrait are huge as its the width being fitted, therefore tall and skinny image (portrait) is having its width fit to container thus making it massively tall.
My solution was to think about the container, if in the instance of a portrait image i set the container to be 50% of the landscape container then when i fit the images width (when portrait) to a smaller container i get them proportional (ish).
So wat you want is 2 containers to use, one for portrait and landscape, the landscape one will be the maximum width you want so 450px. Now make your portrait container half a width so 225px (half of the width) if all your images are the same aspect ratio then they should all match nicely and give you a structured grid - or if single column the portrait images will be more or less as tall as the landscape images are wide.
If you want to see this working (for a short time) I'll leave this link up so you can see how i solved it. The example is an email (please don't moan about poor coding, its not finished) template I'm making, where i have a single column of images (its responsive) both portrait and landscape - use a class on the table that contains the portrait image (class=portrait) but this could easily be a div.
http://www.sink140.com/sf-test/single.html
My main point is to stop thinking about trying to control the height, just control the container, let the image fill it, and by adjusting the width of the container (making it smaller) you naturally reduce the height of the image.
Aspect ratio of the images in general will ensure you can predict the layout as you have a baseline of sorts - portrait images relate to the landscape ones.
Hope this helps or at least give you another idea.
I want to decrease an 480 X 480 bitmap image size to 30 X 30 pixel size but keeping the whole height and width intact. (I do not want to scale or use height/width property! )
So if i divide 480/16 = 30. So i need to take average pixel values of 30 pixel elements and put it into new image.
How to take the average in actionscript 3.0? I looked at getpixels() method, is their any simple way/methods to achieve this?
Let me put in more simple way - I am trying to reduce pixels in an bitmap image from 480 X 480 to 30 X 30, the height and width remain same and i expect some amount of distortion after converting image to 30 X 30.
I did scaling but it reduces width and height, if i again increase width and height it just regains normal pixels. Thanks!
Why don't you simply then make a copy of the whole image in code, but use the simple scaling to scale the copy, and only present that to the user. Also look at this from Stack Overflow
How to resize dynamically loaded image into flash (as3)