Hi I've been working with the iTunes API and what I've done is saved the data that's returned from the search into the database. I'm saving the iTunes image URL to my database and I'm wondering what would be the best method to crop the image from the URL with PHP, or is it better to crop the image with jQuery before I display the images on the site? Thanks in advance for you advice!
You're going to want to crop images server-side, probably. Cropping client side means the client is going to have to load the whole image, and that will slow down page loads (potentially a lot, depending on how big the images are).
Cropping server-side means that you'll have to save the cropped images to your server and serve them from there. This is more of a pain than just doing the cropping client-side, but it will probably be better for your users in the end.
Since you're using PHP, you want ImageMagick.
Full step-by-step tutorial to crop image using jQuery & php (included live demo)
http://www.script-tutorials.com/image-crop-plugin-using-jcrop-jquery/
It is best to crop and store the cropped versions on the server, that way the images load faster and you save a lot of bandwidth.
Related
I want to know how to apply progressive image in my website.
I'm using Image intervention. I search some way to apply image intervention
but I did not understand. Like
$img = Image::make('public/foo.png');
$img->interlace();
the original image and image that interlace don't have difference.
Can anyone help me to understand progressive image and how to apply it using image itervention in my website?
As you can see in this illustration:
Interlacing (also known as interleaving) is a method of encoding a bitmap image such that a person who has partially received it sees a degraded copy of the entire image.
...
For example: Interlaced GIF is a GIF image that seems to arrive on your display like an image coming through a slowly opening Venetian blind. A fuzzy outline of an image is gradually replaced by seven successive waves of bit streams that fill in the missing lines until the image arrives at its full resolution.
~ Interlacing (bitmaps) on Wikipedia
In another word, you won't see any visual difference between two images unless you try to load them with a low-speed connection within a modern web browser.
(See: Firefox DevTools has now a network throttling tool to simulate slow connections)
And BTW, your code was correct. I guess you were just trying to see a difference between interlaced and non-interlaced images which you will not be able to as long as they are not huge and they'll load fast.
For better understanding:
Videos of SCTP vs TCP in progressive vs non-progressive
I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page?
For example, i currently have a large image (1200x 1200) which i need to be fitted to 100x100. Would this be possible via jQuery or would it have to be done manually?
Thanks.
You would have to change your image sizes on the server and then change the page HTML or javascript to reference those smaller images. jQuery runs in the browser so, it can't take a 1200x1200 image on the server and somehow make it 100x100 before it gets downloaded.
But, changing the images to the smaller size on the server WILL drastically improve your page load time.
Yes it certainly will increase your page load speed.
And, resizing the image on the server is a better option.
reference:
Should I generate each thumbnail dynamically every time it is requested, or store them on image upload?
To resize images server-side, you can use WideImage library.
With an instruction like this :
WideImage::load($path)
->resize(100, 100)
->output("jpg");
You load your image, resize it in memory and return its data in the desired format.
I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page? Would this be possible via jQuery
No. This would require that the browser download the large image over the network and then process it to reduce it in size.
If you want to speed things up, you need to make the images smaller before they leave the server.
You don't need to do this manually though. Image resizing can be done programatically.
I've read many articles and discussions in forums and I still cann't figure out the difference between resizing a large image with php(not with html) and creating thumbnails. Except for the fact that the most people suggest phpthumb and imageMagick for thumbnails I don't understand why I should or not prefer to use these and not php functions like imagecreatefromgif(png,jpeg) and imagecopyresampled which can do this job(according to what I read.). What I'm trying to do is to create many galleries, so I want the images the user uploads to be resized in a smaller size if they are too large. Moreover, I need these images to be resized in smaller pictures that will be shown to gallery and when the user clicks on them they get their real size. So far, the user can upload an image that will be saved in a folder. I resize my images for galleries with html(which I know it's wrong) and I use fancybox for clicking and enlarging part with which I am satisfied. Please help understand the difference and give me the your advice what is the best thing to do. Thanks
Take this scenario.
I'm a highly equiped professional photographer and your photo application will store every image I take. I shoot in RAW so my images are massive. I also want to upload the original hi res JPEGs.
Now if you do not resize these images to thumbnails (by whatever mechanism you choose), if I try and view a particular album, I might have to load a 10x 20Mb images, only to have them resized down to 80x60pixels (and become totally crackling/noisy and extremely pixelated).
So what can you do?
Resize the images on your server, using something like ImageMagick as you suggest to generate multiple versions of this image.
This way you can deliver optimzed qualities for every occassion.
You should always intend to display an image in it's native resolution/dimension to avoid rastering or resizing noise.
And also, you want to save the different versions of the images.
imagecreatefromgif() will use the GD library by default.
Some reasons why one might prefer ImageMagick are detailed here and here.
That said, if you're happy with what you've got already and if there's no realistic chance of running into any GD dealbreakers later on, you certainly may reasonably decide to stay with what you have.
I am looking for a decent image cropping solution, ideally a script that would do the following :
Allow to upload an image (ideally via ajax), crop the image using some jQuery like cropping tool and then save the 'new' cropped image while retaining the image untouched.
Is there anything people could recommend?
Use Pixastic for client-side image processing.
Edit
It sounds like you might be looking for an image crop GUI for users, rather than a way to programmatically crop images (as I read your question originally). In that case, there are a variety of jQuery plugins that provide this; jrac seems to be a reasonably up-to-date one.
you can check here it is good tool
http://deepliquid.com/content/Jcrop_Download.html
I have been attempting to use a mashup of jquery plugins found on this website. as far as i can tell this is a pretty good peice of code, just have a couple of issues.
my main issue is that if i attempt to upload a file that is larger than the max file size in firefox it sends a javascript alert saying "error" which it is supposed to do but then crashes firefox and i have to physically end the process.
my next issue is that when you do upload an image and specify the crop target it doesnt actually seem to crop it rather just resize the the image to fit the samll region.
I would happily plough through the code myself but i know very little about javascript and next to nothing on jQuery, i do however know a fair bit about php so that side of things shouldnt be too bad.
hope someone can help,
Nate.
You can't resize the image in Javascript - i imagine all it does is change the image tag. You need to send the resize coordinates/height/width to your backend and then resize it there.