I am looking for a solution to show smaller image in bigger canvas. would like to know if there is a method to increase image size 100% without distorting it in html5 canvas runtime on safari and chrome browsers .
Maybe...
If the image is vector based it would double size with little noticeable distortion.
If the small image is high resolution (eg 300 dpi instead of the webs traditional 72dpi) you can double the size with little noticeable distortion.
Otherwise...
Try just putting the image in an image element and having the browser double the size. Modern browsers use Bicubic interpolation and do a reasonable job of scaling.
Take the image into Photoshop and enlarge it there. Try both Bicubic Smoother and Bicubic Sharper to see which works best for your particular image.
If none of these are workable for you, try "cheating" by just scaling X 2 and then apply a slight blur to hide the distortion. A useful Gausian/Box blur library is Quasimondo's stackblur: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Related
I'm currently using RN 41.2 and I have questions about resizing images from a url. The url files can get quite large, usually around 2000x2000 and I want to display them way smaller probably around 25x25.
Is there an equivalent iOS Image prop for the 'android only' resizeMethod?
When resizeMethod='resize' it changes the size of the large encoded image before it is decoded and so the images display almost immediately in the smaller size and it's great.
But for iOS I'm using resizeMode (contain, cover, etc) and it displays the image correctly but it always takes a bit of time for the images to actually appear, which is totally understandable it's just annoying.
Am I missing something here? It seems like resizeMode should do the same thing the resizeMethod does but it clearly does not
resize mode property decides how the RAW image should be fit inside its frame (cover, contain, stretch, center, repeat)
refer https://reactnative.dev/docs/image#resizemode
In addition for android we can choose the mechanism that should be used to resize image that is to scale , resize or auto using resizeMethod prop.
refer https://reactnative.dev/docs/image#resizemethod-android
basically resizeMode instructs how to resize the image and resizemethod defines what mechanism to use for resizing
This is provided as there exists some issues in android when the frame size and RAW image size varies significantly (too large image: too small frame or too small image and too large frame) and there can be significant delays or design breaks while rendering as auto selection of resize mechanism isnt optimal.
You can escape without setting resizeMethod manually (defaults to auto) most times but it causes issues in before mentioned scenarios.
resizeMode and resizeMethod are 2 properties that the Image component has in RN.
resizeMode: Determines how to resize the image when the frame doesn't match the raw image dimensions.
It can take cover, contain, stretch as values.
resizeMethod: It can be used to resize the image when the image's dimensions differ from the image view's dimensions.
It can take auto, resize, scale as values.
For more you can refer https://facebook.github.io/react-native/docs/image.html
I've imported many clips from photoshop into flash and animated them. they are still editable by photoshop though.
Now i realized that the clips are much larger size than i require on runtime. Which leads to my first question :-
Does their original size effect the performance, if i am scaling them half on the rumtime?
And, if it does is there anyway i can shorten the size originally, given that i've already animated them?
Right clicking the image to edit it with photoshop, that does not work because we cant change size there.
It probably does affect performance, but how noticable it is depends on their size and on how many of them are being scaled at the same time. What you do with them during runtime could also affect this.
You can change the size in Photoshop, but it means you will have to enlarge the image again in Flash, since any transformations like scaling will remain after resizing the image in Photoshop.
I have a client who insists on "crisp" images on his Web pages. One image he gave me was 2592 pixels wide, but the page is only 940 pixels wide. No problem, I just resize the images using Photoshop but there is a noticeable drop in quality, lots of jagged edges. I expect a loss of quality when resizing to one-third the size, but I thought I could do better. So what I did is take the original image and have the browser (Chrome) resize it to 940 pixels wide. Yes, I understand this is the absolute worst thing to do but I was just experimenting. It turns out the browser does a much better job of resizing than Photoshop -- I don't get the jagged edges and the picture looks fairly close to the original in quality.
So what's the deal here? Why is Photoshop not as good as resizing as Chrome (IE8 and Firefox do just as good a job too)? I've tried tweaking Photoshop's resampling options but have seen no real difference.
There are a couple of different things to take into account when scaling images in photoshop:
1.) File type+compression
You're going to want to make sure that if you use a filetype with lossy compression (i.e. JPEG) that you set the quality >8, or you will see a noticeable drop on quality.
2.) Resample method
Photoshop provides a few different resampling methods which effect how pixels are combined when scaling down. Below are links to some images that illustrate where you can modify this when scaling.
Image->Image Size...
http://cl.ly/3W3M0b3W3H0G1Y452L15
There is a drop-down on the bottom of this window:
http://cl.ly/0o463J2J0e2L1u0C1U26
Likely what you're experiencing is that your image is resampling using "Nearest Neighbor" or Bilinear".
Give it a go.
You can try using a browser-based script such as TimThumb: http://code.google.com/p/timthumb/
You really do need to resize the image instead of shrinking a huge image just to display. This script will create copies of your image in different sizes and if I remember correctly, it even supports some sort of caching.
Ive had it resize pretty large images for me to very small thumbnails and it always looked sharp.
Photoshop and web browsers handle resizing differently. I don't use Photoshop, so I can't help you with that..
However, if you want that the picture looks like resized by a web browser, then resize it with a web browser! Take a screenshot and cut the resized picture, creating another one which you can really use on the site.
Just wondering:
I'm trying to set up an adaptive image handler in Coldfusion8, which resizes images for smaller screensizes.
I have it working allright and am currently playing around with the different resize options found here
What I notice is no matter what method I'm using, they all take time, reduce the image quality and not really reduce the image size, so for example:
IMG 1 IMG 2
Original 23K 900x360px 53K 900x360px
Blackman 22k 320x128px 52K 320x128px
highPerformance 21K 320x128px 32K 320x128px
nearest 25K " 38K "
The idea was to resize images for smaller displays. Right now I'm not really reducing anything, I'm only drainging the processor for resizing and output blurry images and the same file size.
Question:
Why should I bother resizing then? I might as well send the original file which #900x360px #23K. At least that images will be sharp vs. a resized blurry image with 320x1280px. Is there a way to make resizing images in Coldfusion worthwhile in terms of file size and/or image quality?
Thanks for inputs!Cldfu
I think what you fiddle with are quality/speed of the resize algorithm, not compression.
To compress with better file size, set the JPEG compression quality using the quality attribute (default to 0.75)
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7945.html
If cfimage doesn't satisfy your needs, use imagemagick
I have some JPEG images that I need scale down to about 80% of original size. Original image dimension are about 700px × 1000px. Images contain some computer generated text and possibly some graphics (similar to what you would find in corporate word documents).
How to scale image so that the text is as legible as possible? Currently we are scaling the imaeg down using bicubic interpolation, but that makes the text blurry and foggy.
Two options:
Use a different resampling algorithm. Lanczos gives you a much less blurrier result.
You ight use an advances JPEG library that resamples the 8x8 blocks to 6x6 pixels.
If you are not set on exactly 80% you can try getting and building djpeg from http://www.ijg.org/ as it can decompress your jpeg to 6/8ths (75%) or 7/8ths (87.5%) size and the text quality will still be pretty good:
Original
7/8
3/4
(SO decided to scale the images when showing them inline)
There may be a scaling algorithm out there that works similarly, but this is an easy off the shelf solution.
There is always a loss involved in scaling down, but it again depends of your trade offs.
Blurring and artifact generation is normal for jpeg images, so its recommended that you generate images is the correct size the first time.
Lanczos is a fine solution, but you have your trade offs
If its just the text and you are concerned about it, you could try dilation filter over the resampled image. This would correct some blurriness but may also affects the graphics. If you can live with it, its good. Alternatively if you can identify the areas of text, you can apply dilation just over those areas.