Displaying images on webserver?

Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

 Reply

User avatar

Displaying images on webserver?

By ReNNo_BiH
- Thu Jun 25, 2015 1:30 am #21569 New ESP-12E modules come with 4MB flash and sounds great for creating better stylized web pages.
My aim is to add favicon and small logo on web page that ESP12E hosts.

I couldn't find any example for achieving that using Arduino IDE.
Any hints?
User avatar

Re: Displaying images on webserver?

By SwiCago
- Thu Jun 25, 2015 9:59 am #21622 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>
User avatar

Re: Displaying images on webserver?

By FlyingHacker
- Thu Jun 25, 2015 12:38 pm #21641 I think I would store all images on another real web server, and simply have the ESP deliver the HTML with absolute links to the images.

Of course this doesn't work if you want your application to work without internet access (or without access to another local server).
User avatar

Re: Displaying images on webserver?

By ReNNo_BiH
- Thu Sep 17, 2015 6:04 am #29231
SwiCago wrote: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've just tried and it works.
But my problem is that I use larger image. And my ESP keeps rebooting.
Any idea how to store larger image?
 Reply
Return to General Discussions