I want to create an animation using an image that refreshes every 15 minutes hosted at this url:
http://www.bungie.net/Stats/Halo3/Nightmap.ashx
What is the best way to store the images and then animate(loop) the 24 most recent images?
Should I use a mysql database to store it or something else?
What are your thoughts?
Thanks
Perhaps you want something like this:
http://www.metoffice.gov.uk/satpics/latest_IR.html?
As you can see in the html of that page, they get the images names output as a JS array. You would use PHP in this case to get those names and make that JS array.
EDIT: To retrieve the images from that URL you can use php's file() function or the curl functions, for which there is an example here. As I see it, the url returns only the image file itself, so you don't have to bother with html scrapping.
Then, when you click the Play button the images are first preloaded via AJAX, this way the "animation" is quite smooth. If you use Jquery for the client side functionality it should be pretty easy both to preload the images via AJAX and do the animation itself.
As an alternative to AJweb's solution, you could also generate an animated GIF on server side every 15 minutes via a cronjob. To generate the GIF, you could use the PHP Graphics Library.
On the client side you would then only need to refresh the GIF every 15 minutes, or, check via AJAX if there's a new GIF aviable and then refresh.
Related
I have am planning to use Colorbox the jquery lightbox plugin. I am just wondering as to what the best method would be to implement a 'add/upload image' option so it would be easy for a user to upload new images without having to go into the HTML markup and add an individual <img> line of code for each new image.
I am only currently knowledgeable with HTML and CSS at this current time. So if no one already has a snippet they could possibly provide me with, which language would be 'simpler' to learn for just for this specific task. Would it be PHP or Js or something different?
OR am I going about this completely wrong?
Of course they have to upload images to database. You need a suitable back end design. That means you need php to interact with database(or python will also do). If you need dummy upload procedures then you can easily do it with appendTo() method using jquery.
As you are using a plugin, then you will have a method to add an image to the webpage. It will be something like $("user-uploaded-image").plugin-name();
Where you want to upload the image?
Uploading an image means transferring the image to another location (server). For that you need a server side script that
Receives the image.
Saves the image to server hard disk.
php is a server side scripting language.
JS is client side language that is used to sending requests (in this case image ) to server.
Just google it for getting sample image upload scripts.
From taking a look around google for upload scripts suggested by #kiren Siva I came across quite a few CMS type plugins that give me the ability to do exactly what I need.
Some examples can be found here.
Thank you all for your help and suggestions.
I generate an image on a few overlapping canvases when a page is loaded (without user-interaction), but that does take ~3 seconds to fully draw. I want to flatten these canvases, and convert this image to a PNG on the server, for use in thumbnail previews.
Flattening to a single canvas (using ctx.drawImage(other_canvas,0,0)) and then ctx.toDataUrl() looks like exactly what I need. Is there a way do this on the server side without requiring a user's browser? Some kind of command-line javascript / canvas parser perhaps, which can load the page, wait for the canvas to finish rendering, then inject some javascript to flatten, call toDataUrl, resize and save the resulting image.
AJAX solutions which render and send the thumbnail back to the server won't work as I need the thumbnail before the first person has viewed the page. It also needs to be fast (hopefully only slightly longer than the time the canvas takes to render, 3 seconds). I can't wait for an external service like browsershots.
I looked at CutyCapt, but that renders the entire webpage, not just the canvas (and also doesn't seem to draw everything on my canvas for some reason).
You might want to take a look at Phantomjs:
https://github.com/ariya/phantomjs/wiki/Screen-Capture
This does a good job of rendering html content to a PNG, although this will also do the entire page. Perhaps you can wrap the canvas contents you are interested in in a separate page and then use phantomjs to turn it into a png.
PHP has various libraries for server-sided image generation which offer functionality which is similar to the HTML5 canvas.
Look into PhantomJS which is a command line version of the webkit browser and you can do cool things such as save the output of a rendered page in an image etc. AFAIK you can also inject javascript code which can give you more control when to take a screenshot with it.
http://phantomjs.org/
Currently I'm working on a project in which user of website can design a giftwall by drag and drop of gifts. Drag, drop and sorting works perfect and I'm able to store generated giftwall into database. On recipient side system lists all the gift images in the same sequence sender sent so it visually looks like a giftwall. I want to allow users to store this giftwall into a single image so they can store their giftwalls into image album. In current system it lists all individual gifts into a individual div resided in main wrapper div. How can I export this wrapper div to image so it looks same as HTML. Any help will really be appreciated. Waiting for reply.
Thanks!
I don't know if there is a way by using pure javascript, but you can generate the image on your server and send it back.
I have never heard of saving browser's viewport to an image file via JS. I think it's only possible vie creating SVG or using HTML5 canvas.
I asked exactly the same thing a while back.
HTML div to screenshot?
The conclusion is... it is not possible with JS. Questionably possible from PHP also.
Use can use an online service for screen capture, like browsershots, but its not in real-time, and doesn't render everything well.
I used a workaround for my situation.
Recreated all the DOM/HTML elements which create the image (load parameters form database, and generate the DOM). Wrap everything in one container div, and zoom it out to the size you need.
I know, not the prettiest solution, but the only solution I could get to work.
Using <canvas> you can create image that will looks similar to how it looks on the page. Try it this way:
Get the size of wrapper <div> and create the same canvas element. Then get the position of each image in the div wrapper and draw that image on canvas at the same position with the same size.
Things may be harder if you need to draw additional controls, like button or textbox.
All modern desktop browsers suport <canvas> now.
You can either use html2canvas, which isn't perfect yet. Or store browser offsets of elements in div and then with GD or ImageMagick combine them into an image
Maybe this could be of use: http://html2canvas.hertzen.com/
I'm building a web app where users can store links, with 200x200 pictures associated. By default, I'd like to crawl the link for images and then return thumbnails of the biggest ones (from which the user can select the "official" thumbnail). I want this all to happen via AJAX. My question is: what is the best way to do this?
Currently, I'm using the PHP Simple HTTP Parser to scan a URL. I then find the src attribute of all the <img> tags, use getimagesize to store the image size located at that URL, sort the array from biggest to smallest and return the top 5 biggest image URL's via AJAX to the client. Then the client sends a different AJAX request for each one which makes a server-side ImageMagick script download and cut the image to a thumbnail, save it in a temporary folder and then return the URL of this thumbnail, which the client finally loads on his browser.
Needless to say, this is a little complicated and probably really inefficient. Running this process on http://en.wikipedia.org takes about 10-15 seconds from start to finish. I'm not certain there are any more efficient ways, however.
I'd do it in one AJAX request, with the script automatically resizing the biggest 5 images on the first pass, saving them, and returning a JSON array with the resized image URLs for the client.
You should probably use PHP's DOMDocument class to grab/parse the html page.
getimagesize() means you have to download each image and process them. Perhaps you should consider simply showing the user ALL images, by simply placing img tags that link back to the original HTML page. You could size these however you like using the tags. This way you do not have to download/process a single image until the user has actually selected one for the thumbnail.
Interested if / how you solved this?
In the end I looped through the images doing getimagesize() until both height and width were over a certain size, and then broke the loop.
This way its slightly more efficient as it only downloads as many images as it needs
I have a php/mysql driven database, where image paths are stored for specific pages. The images are all hosted locally on my server. Users can upload images, and the data is then stored in mysql.
I would like to enable users to draw on top of rendered images.
Do I need JAVA to accomplish this?
Are there other APIs or languages that can aid me in my goal?
Basically, I would just let users draw "on top" of the existing image. Somehow their drawings would be saved to a .png, which I can then overlay on top of the original image. However, I'd like for the user to be able to choose the color, etc. Also, I would like to limit how much a person can draw on each photo per 24 hour period.
So, what do you guys think? Flash? JAVA? Php (if I should be so lucky)? I would love to hear your thoughts on this.
JavaScript.
The HTML5 Canvas might do the trick.
You need not to use Java. You can do that with PHP Canvas programming or in client side javascript canvas.
http://www.phpjabbers.com/put-watermark-on-images-using-php-php20.html
http://motyar.info/blog/2010/04/drawing-on-web-with-canvas-and-jquery.html
Look at SketchPad (http://mudcu.be/sketchpad/) - it has examples of everything you want to do in HTML5 / Canvas, but note that a downside of the Canvas approach is the "save" is a little clunky and seems to be browser dependent. You need to convert the image to a data uri, then save it using the available browser commands manually (like right click and "Save As").