I would store images in the page as URL data. Most browsers support this feature of HTML5
Ex: This displays a small image of a folder.
Code: Select all<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="embedded folder icon">
I plan to do something very similar, as soon as my esp201 gets here. I plan using a feature of HTML5 that allows you to resize an image before upload and save said image in URL data format. Then I plan to store all resized images onto an SD card.
Here is some sample code I have been playing with that resizes images...Last thing I need to add is an AJAX layer to send the images to ESP for saving.
Code: Select all<html>
<head>
<style>
</style>
<script type="text/javascript">
function detectVerticalSquash(img)
{
var iw = img.naturalWidth, ih = img.naturalHeight;
var canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = ih;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var data = ctx.getImageData(0, 0, 1, ih).data;
// search image edge pixel position in case it is squashed vertically.
var sy = 0;
var ey = ih;
var py = ih;
while (py > sy)
{
var alpha = data[(py - 1) * 4 + 3];
if (alpha === 0) {
ey = py;
} else {
sy = py;
}
py = (ey + sy) >> 1;
}
var ratio = (py / ih);
return (ratio===0)?1:ratio;
}
function handleImage(file)
{
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var reader = new FileReader();
reader.onloadend = function()
{
var img = new Image();
img.onload = function()
{
var vertSquashRatio = detectVerticalSquash(img);
var ratio=img.height > img.width ? 800/img.height : 800/img.width;
ratio = img.height && img.width < 800 ? 1 : ratio;
c.width = parseInt(img.width * ratio);
c.height = parseInt(img.height * ratio);
ctx.drawImage(img,0,0,c.width * vertSquashRatio ,c.height * vertSquashRatio );
var dataurl = c.toDataURL("image/jpeg",0.8);
document.getElementById('val').innerHTML=dataurl; //resized image data for upload
}
img.src = reader.result;//raw data for upload (full size)
}
reader.readAsDataURL(file.files[0]);
}
</script>
</head>
<body>
<div style="background:#990; width:100%; padding:20px; ">
<div id="val"></div>
<label>Image File:</label><br/>
<input type="file" accept="image/*" id="imageLoader" name="imageLoader" onchange="handleImage(this)"/>
</div>
<canvas id="myCanvas" style="display:none"></canvas>
</body>
</html>