I’m pulling remote image dynamically from another website. Some of these image are are very large as far as dimensions. However they’re all the same width.
So currently, I display them with the overflow:hidden;. However, some of the image are tremendously big height wise. As such, the load times for those image are long, even though only a small portion of their dimensions are being displayed
Is there any way (with JQuery) to essentially crop an image that exists remotely, as I’m pulling it in for display?
javascript is client side, meaning it runs on your computer. you cannot manipulate an image with js without loading it completely (even if you have an image manipulation library on js).
in your case you want to manipulate an image on a remote host – make an HTTP request that fetches a part of the image using javascript – it’s not possible (unless you have a webservice of some kind).
in your case – you can download the entire image from server A and upload it to server B and run the manipulation using server B.
A better way would be to download the entire image from server A – do the manipulations using javascript (and html canvas) and generate the modified version and send the modified version to server B. Since downloading is fast and uploading is slow – this should work pretty fast.
In both cases you need to download the entire image. In the second method you will not have to upload the original (large) image to the server, but only a smaller modified version.