Skip to content

Instantly share code, notes, and snippets.

@palumbo

palumbo/20pics.html

Created February 24, 2016 18:55
Show Gist options
  • Save palumbo/7f7069d955f8e5fa8ff3 to your computer and use it in GitHub Desktop.
Save palumbo/7f7069d955f8e5fa8ff3 to your computer and use it in GitHub Desktop.
Download ZIP
20pics.html
Raw
20pics.html
<html>
<head>
<title>1 Image - 100 Possibilities</title>
<style>
body { font-family: sans-serif; }
#imageUpload {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<h1>20 Conversions for a single image</h1>
<p>We tend to use the line "One image, infinite possibilities" when talking about Filestack's image transformations. Our on-the-fly transformation of delivered images allows customers to serve a single image in an almost infinite number of variations without ever changing the original file. To show how easy it is to use our powerful image transformations in your app, I took on picture and served it 20 different ways. I'll let you do the math to extend that to, um, infinity.</p>
<p>Take a look at our <a href="https://www.filestack.com/docs/image-transformations/image-transformations">documentation</a> for more information on image transformations.</p>
<div id="button_container">
<button id="imageUpload">Upload Your Image</button>
</div>
<!-- where i put the image -->
<h3>Original</h3>
<img id="orig" src="" />
<h3>1. Monochrome</h3>
<img id="bw" src="" />
<h3>2. Round Avatar (with Face Detection)</h3>
<img id="avatar" src="" />
<h3>3. Blurred and 250 Width</h3>
<img id="blur" src="" />
<h3>4. Watermarked</h3>
<img id="water" src="" />
<h3>5. Rotate 180</h3>
<img id="r180" src="" />
<h3>6. Rounded Corners, resized to a width of 500 pixels</h3>
<img id="round" src="" />
<h3>7. Image with rounded corner and background set to black, resized to 800 high</h3>
<img id="round_black" src="" />
<h3>8. Rotated Polaroid </h3>
<img id="polaroid" src="" />
<h3>9. Shadow and Blur Parameter</h3>
<img id="shadow" src="" />
<h3>10. Pixelate Faces</h3>
<img id="blur_faces" src="" />
<h3>11. ASCII Art</h3>
<img id="ascii" src="" />
<h3>12. Thumbnail preview scaled to 250x250</h3>
<img id="thumb" src="" />
<h3>13. Converted to PNG and quality reduced by half</h3>
<img id="quality" src="" />
<h3>14. As an oil painting</h3>
<img id="oil" src="" />
<h3>15. Modulate Filter (hue set to 240, saturation set to 200 and reduce brightness to 80</h3>
<img id="mod" src="" />
<h3>16. With Bacon!!</h3>
<img id="bacon" src="" />
<h3>17. Mirror Image</h3>
<img id="mirror" src="" />
<h3>18. Face detect set to crop all the faces, white border 10px</h3>
<img id="faces" src="" />
<h3>19. With 20px orange border, resized to 500 width</h3>
<img id="border" src="" />
<h3>20. Torn Edges </h3>
<img id="torn" src="" />
<script type="text/javascript" src="https://api.filestackapi.com/filestack.js"></script>
<script>
// setting all the variables
var orig = document.getElementById('orig');
var bw = document.getElementById('bw');
var avatar = document.getElementById('avatar');
var blur = document.getElementById('blur');
var water = document.getElementById('water');
var r180 = document.getElementById('r180');
var round = document.getElementById('round');
var round_black = document.getElementById('round_black');
var polaroid = document.getElementById('polaroid');
var shadow = document.getElementById('shadow');
var blue_faces = document.getElementById('blur_faces');
var ascii = document.getElementById('ascii');
var thumb = document.getElementById('thumb');
var quality = document.getElementById('quality');
var oil = document.getElementById('oil');
var mod = document.getElementById('mod');
var bacon = document.getElementById('bacon');
var mirror = document.getElementById('mirror');
var faces = document.getElementById('faces');
var border = document.getElementById('border');
var torn = document.getElementById('torn');
filepicker.setKey( "A1AJmUYdDTj2Y5wEFtRO7z" );
document.getElementById('imageUpload').onclick = function(){
filepicker.pick(
{
mimetype: "image/*"
},
function(Blob){
console.log(JSON.stringify(Blob));
// original
orig.src = "https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:500/" + Blob.url;
// 1
bw.src = "https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:500/monochrome/" + Blob.url;
// 2
avatar.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/crop_faces=mode:thumb,w:100,h:100,buffer:150/circle/" + Blob.url;
// 3
blur.src = "https://process.filepicker.io/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:250/blur=amount:7/" + Blob.url;
// 4
water.src = "https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:500,h:1500/watermark=file:U8Hnp4jR5Wso6Mm5mPgI,size:10/" + Blob.url;
// 5
r180.src = "https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:250/rotate=deg:180/" + Blob.url;
// 6
round.src = "https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:700/rounded_corners=radius:5000/" + Blob.url;
// 7
round_black.src = "https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=h:800/rounded_corners=background:000000FF,blur:20,radius:max/" + Blob.url;
// 8
polaroid.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=w:250/polaroid=rotate:15/" + Blob.url;
// 9
shadow.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=h:300/shadow=blur:15,vector:[25,25]/" + Blob.url;
// 10
blur_faces.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=w:800/pixelate_faces=faces:all,amount:10,type:oval,buffer:120,blur:14/" + Blob.url;
// 11
ascii.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/urlscreenshot/https://process.filestackapi.com/Ay29DgXIeTQanJDeZgTBVz/ascii=b:black,c:true,r:true/" + Blob.url;
// 12
thumb.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=w:250,h:250,fit:scale/" + Blob.url;
// 13
quality.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=h:500/output=format:png,quality:50/" + Blob.url;
// 14
oil.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=w:800/oil_paint=amount:4/" + Blob.url;
// 15
mod.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=w:550/modulate=brightness:80,hue:240,saturation:200/" + Blob.url;
// 16
bacon.src = "https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:800/watermark=file:JGH7ZOcQnqiPZSxTC1xr,size:100/" + Blob.url;
// 17
mirror.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=w:600/flop/" + Blob.url;
// 18
faces.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/crop_faces=mode:thumb,faces:all,buffer:200/border=width:10,color:green/" + Blob.url;
// 19
border.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=w:500/border=width:20,color:orange/" + Blob.url;
// 20
torn.src = "https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=w:300/torn_edges=s:[1,45],background:black/" + Blob.url;
}
);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment