<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d8211560\x26blogName\x3dTech+Tips,+Tricks+%26+Trivia\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://mvark.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://mvark.blogspot.com/\x26vt\x3d-5147029996388199615', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tech Tips, Tricks & Trivia

by 'Anil' Radhakrishna
An architect's notes, experiments, discoveries and annotated bookmarks.

Search from over a hundred HOW TO articles, Tips and Tricks


Free Image Generation and Manipulation Web Services

Images make content more interesting. There are many websites that offer free photos and images under liberal licensing terms. There are also many web services that can generate & manipulate images on the fly by altering values within their URLs -

* Placeholder images - useful for web developers & designers when they don't have actual images yet. This link has a bunch of such image generation services which can create images of specified dimensions with color or celebrities or kittens in them.

Right click on the image, choose the option to open it in a new tab from the context menu & inspect how the URL is constructed

* Google Chart API can generate dynamic Icons, Bubbles, Pins, Fun Style Notes, Weather Forecast Notes, Outlined Font Text Blocks, Contextual Icons, Flags & miscellaneous images of short sizes. You just have to specify some querystring parameters within the URL to get different types of images.

* Update on 4/Sep/2015 - This feature appears to be unavailable now however there is an undocumented Google image resizing feature that works similarly The Sencha.io Src service can resize (to a lower dimension) any image from any domain or convert it to a different image format. This is a great resource for generating "responsive images" for sites that implement responsive web design. The image manipulation is done by specifying appropriate values within the URL of the Sencha.io Src service. To get an image with scaled down dimensions, append the URL of the image to be resized to the end of the Sencha.io Src URL while also specifying the desired dimensions in the URL, thus: http://src.sencha.io/32/32/http://example.com/someimage.jpg

* Google's authentication-less, on-the-fly image resizing service - Carlo Zottmann has discovered that G+ uses an open API endpoint that can be utilized experimentally to construct a URL to generate a dynamic image with your values for the parameters

Base URL
https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy

Parameters:
url: original image URL
container: must be "focus" (i dunno lol)
refresh: time (in seconds) to cache it on G's servers
resize_w: width in pixels
resize_h: height in pixels

You can either specify both resize_* parameters or just one.

Sample -
https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?
url=http://example.com/some.jpg
&container=focus
&resize_w=650
&refresh=31536000

The technique has a quirk though. Opening the URL in the browser will force the download of a p.txt file (which is actually a JPG) but putting the constructed URL in an img tag will work fine with a dynamically generated image.

Labels: ,

Tweet this | Google+ it | Share on FB

« Home | Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »

»

Post a Comment