img-cacher
Version:
Serve images from localStorage – great for offline apps.
78 lines (71 loc) • 3.7 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>ImgCacher</title>
</head>
<body>
<script type="text/javascript" src="./img-cacher.js"></script>
<script type="text/javascript">
var imgCacher = new window.ImgCacher({
prefix: 'img-demo-',
logging: 'imgCacher'
}),
size = 110,
srcs = [
// 'samples/cat-a.jpg',
// 'samples/cat-b.jpg',
// 'samples/cat-c.jpg',
// 'https://www.gravatar.com/avatar/6e090ce190ad7ebd76462bd8a20d3f7d?s=' + size + '&d=404',
// 'https://www.gravatar.com/avatar/222e556c1434331e9f5e915ee23f0fad?s=' + size + '&d=404',
// 'https://www.gravatar.com/avatar/222e556c1434331e9f5e915ee23f0fad?s=' + size + '&d=404',
// 'https://www.gravatar.com/avatar/222e556c1434331e9f5e915ee23f0fad?s=' + size + '&d=404',
// 'https://www.gravatar.com/avatar/222e556c1434331e9f5e915ee23f0fad?s=' + size + '&d=404',
// 'https://www.gravatar.com/avatar/222e556c1434331e9f5e915ee23f0fad?s=' + size + '&d=404',
// 'https://www.gravatar.com/avatar/222e556c1434331e9f5e915ee23f0fad?s=' + size + '&d=404',
// 'https://wza70micu5.execute-api.us-east-1.amazonaws.com/dev/download?key=task/5aa3a36f4ba51c8bb10a/uploads/6cb7b3bd3a314eb2e918/IMG_4598.PNG&authorization=1%3AWebToken%2FHDjrlQ2OPkSq6jWd9FubGa8IKX67KrZjjxR%2BqIcu%2FyCh1tjMxVdI6y5cudPUTnZHpev3d%2Boew86ZJGWkCrAG7Q%3D%3D'
'https://s3.amazonaws.com/uploads.hellofocus.com/users/1/signature.png'
],
r = Math.random();
srcs.forEach(function(src) {
var img = document.createElement('img');
imgCacher.src(src, {
r: r, // Just so that we can test stuff :)
// cropWidth: size * Math.random(),
// cropHeight: size * Math.random(),
// cropX: 0,
// cropY: 0,
type: 'image/jpeg',
encoderOptions: 0.95,
fillWidth: size * Math.random(),
fillHeight: size * Math.random(),
// src: function(cacheKey, done) {
// setTimeout(function() {
// done(src);
// }, 3000);
// },
bg: '#fff',
// maxHeight: size,
// maxWidth: size,
}, function(err, dataUrl, isNetworkRequest) {
var content = '';
if (err) { // Something went wrong! Fallback to the supplied `url`.
content += 'Something went wrong – falling back to HTTP URL.';
img.src = src;
} else {
content += '`src` is Data URL.';
img.src = dataUrl;
}
document.body.appendChild(document.createElement('hr'));
document.body.innerHTML += content + '<br>';
document.body.appendChild(img);
var original = document.createElement('img');
original.src = src;
original.height = size;
document.body.innerHTML += '<br>Original:<br>';
document.body.appendChild(original);
});
});
</script>
</body>
</html>