I have been researching a gem, 'hpricot', to scrape web pages. I am successful in retrieving image tags from the web page. However, I am in need of a solution to determining the image size of images on the web page.
I am thinking of using javascript to do this, but I am still thinking of how the approach would be.
Has anyone needed a similar solution just like this? Any help would be appreciated.
There is probably a simpler / more efficient way of doing this, but from my knowledge, this could probably work:
Use open-uri to open the image
Use Paperclip::Geometry on the opened image to get the dimensions of the image.
Related
I have set of designs needs to be applied to an image and saved. So if you are a user, you come to my page and add mustachio or any other face elements like hair or eyebrows to a face and save your image.
Im looking for a plugin where I can use this kind of techniques and also allow me to save it as an image on fly.
I can see a lot of masking techniques/ plugins used but I'm not sure if these techniques are capable enough to handle such a thing,
Could you please share your thoughts on this?
Thank you all in advance
You may want to look into the element for creating and saving the image.
a good library that can handle multiple canvas's as layers is EaselJS or FabricJS. Both have pros and cons but can handle multiple layered images as output to one.
I have a website where users are supposed to upload images. I am trying to figure out the best way to set a max width/height of these images, and make the check before they get uploaded.
I know sites like bandcamp have this functionality, and it seems like they are doing this client-side in javascript, but as I read all of the similar questions on the web, it sounds like it is not possible. So here are my questions.
If it is possible to do this in javascript, can someone explain how or show me an open-source example
If it is not, then are either of these two solutions accepted.
a. The image gets uploaded from the browser to the server. Once it is successfully copied to the server, you can use a third-party python lib like PIL (I am using Django) to check the dimensions, and then return a ajax true/false if it was valid
b.Uploaded the image and insert it into the DOM but make it hidden, and then use
document.getElementByID('#image_id").height + width to see the size.
If the size is valid, then display:block or whatever.
both a and b have negatives, so if there is a better solution, let me know
Thanks
Why don't you simple accept all sizes, and check the size with PHP?
f.e. with getimagesize() and reduce the size with imagecopyresampled() like it is shown in the example:
http://www.php.net/manual/en/function.imagecopyresampled.php
If you want to resize on client side you can't do that without a plugin as Mike said.
Btw: A size limit is not smart as much of the visitors aren't able to resize images.
so I was browsing through this page: http://360langstrasse.sf.tv/
It basically is a Javascript-Street View, but only allowing one direction. Therefore its kinda like playing a movie.
When moving fast I notived that the images are grainy/pixelated, the same way as when browsing through Facebook.
I was wondering how to implement this?
I tried with sending small base64 encoded images in the markup, and then draw it on a canvas until the 'real' image was loaded.
This worked fine, but left me thinking if this would indeed increase performance, or do sites like facebook do it differently?
Thanks in advance for any help.
Regards Jens
Edit: Or do they only display the images differently? Have another render process than usual?
As I don't see any small images beeing loaded?
Edit 2: The below mentionewd option to load small images first is descriped nicely here: http://www.phpied.com/picassa-progressive-image-rendering/
But basically it is pretty simple.
I suppose caching (having in-page) bad-resolution images and fetching better is a real way to accomplish this.
The other way would be linking to small images in a normal way, and fetching bigger with JS - small images should load really fast, or you can subscribe to their load event (tricky in IE) and show the page (remove some overlay) once they are loaded.
BTW, instead of using canvas you can put base64 directly into src
<img src="data:image/png;base64,...
The answer is Progressive JPEG's!
One create such with imagemagick for example. This way the browser renders progressively until aborted or completed. Those images may be bigger than normal images, but not always.
Furthermore they provide the ability to be seen before completely downloaded.
Thanks for the help!
On Google some time ago I read an article on optimizing image use. Basically there is a way to combine multiple images...say small icons into one larger image and then use a method to display the part you need for ecah part of the page. Can anyone point me in the right direction on how to do this. Cant' seem to find it on google at the moment. Thanks!
The technique is called CSS Sprites, knowing that will make it easy to find information about it.
You can read about it for example here:
CSS Sprites: Image Slicing’s Kiss of Death
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This is the best website for this. http://spriteme.org/
It will analyze your website and advise you on what images can be 'sprited' (is that the correct term?) and will generate the new CSS for you and the image(s) sprite(s)
i would load a huge image in my web page (8Mpx x 5Mpx). I thought of creating a simple mechanism on the style of google maps..
But, honestly, I do not have very clear ideas on how to implement it.. any advice on how to structure it?
in particular, I have many doubts about how to handle the drag with the asynchronous loading of the image to vary the portion of the images displayed
Thank you in advance for your help : )
An easy answer would to be use Google Maps.
It's a rather advanced topic, but it shouldn't be any harder than doing it by hand.
Here is more information
I've used Zoomify's products in the past to accomplish this. I work on a team that manages a few datacenters, so we have some gigantic floor maps (drawn up in CAD, exported as a huge image). I take those maps and convert them to what I consider a "Google style map" using Zoomify Express (free).
More info here: http://www.zoomify.com/express.htm
I realize this is an old question, but I'd like to suggest http://leafletjs.com/.
I can only think of some sort of tiles. You break down the image in several parts ( tiles ). Then you only draw the one that are in your viewport.