senthilp / imageurigen Goto Github PK
View Code? Open in Web Editor NEWA web service to generate Image data URIs for given image URLs
A web service to generate Image data URIs for given image URLs
------------------------------------------------------------------------------- About ------------------------------------------------------------------------------- Prerequisites: PHP5, php5-curl package, apache ImageURIGen (Image Data URI generator) is a simple web service which generates base64 encoded image data URI response in JSON format for a given set of image URLs. The image URLs can be passed as HTTP GET or POST query string parameters. Internally the web service reads the image URLs from the query string, makes curl (HTTP) calls to the image hosting servers, does a base64 encoding on the curl response, builds a JSON array and sends back the JSON response. This technique would be extremely performant efficient when multiple HTTP calls need to be made from the browser to fetch dynamic images which cannot be previously sprited. Typical use cases would be displaying buddy images in a chat client or social applications, images of items uploaded by users in commerce sites, photo sharing sites etc. which are dynamic and decided on run time. Now with this technique, instead of making individual HTTP calls for images all of them can be combined into a single request to the ImageURIGen web service which will return the complete list of data URIs, which can then be set using JavaScript. Ideally all dynamic images coming below fold in the page can leverage this technique. Even servers can call this webservice directly and build the page with URIs. Sample request and response Request: http://hostedserver/services/urigen.php?params={"images":["http://images.apple.com/mac/home/images/productbrowser/macbookpro.jpg","http://p.ebaystatic.com/aw/pics/logos/logoEbay_x45.gif"]} Response: {"data":[ {"url":"http:\/\/images.apple.com\/mac\/home\/images\/productbrowser\/macbookpro.jpg"","uri":"\/9j\/4AAQSkZJRgABAgAAZABkAAD\/........5AQEBAQEBAQEBAQEBAQEBAQEH\/\/z"}, {"url":"http:\/\/p.ebaystatic.com\/aw\/pics\/logos\/logoEbay_x45.gif","uri":"R0lGODlhbgAtANUAALIAJpnMAAAAmczl.......B4NmdQZTJ5QUFBQUFFbEZUa1N1UW1DQw=="} ] } Enhancements: 1. Currently the service makes all curl calls sequentially, which is not an efficient way and can result in slow responsiveness. These calls can be made parallel using libraries like Pluton http://markdelany.github.com/Pluton/1.0/index.html 2. The web service needs a caching mechanism to avoid repetitive CURL calls for the same images again. The image URLs can be maintained in a hash with the corresponding URIs. Also a cache busting mechanism needs to be in place based on the image response headers 3. If images are hosted by the same publisher who hosts the web service then the images can be maintained in the same web server as the web service (or vice versa) and totally avoid CURL calls. Subsequent disk reads can alos be avoided if caching mechanism is setup 4. Cache headers sent in the final web service JSON response itself can be tweaked in accordance with the actual image cache headers to maximize the usage of browser cache Limitation: IE6 & IE7 do not directly support image data URI, a possible technique is explained here http://www.phpied.com/inline-mhtml-data-uris/ but I would not recommend it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.