hi i want to transfer an image on a sd card to webpage via esp8266.
but i dont know how can i do it...?
please help me
if you have an example code please share it for me...thanks a lot...
mavaraiehasti:
hi i want to transfer an image on a sd card to webpage via esp8266.
but i dont know how can i do it...?
please help me
if you have an example code please share it for me...thanks a lot...
that may work for a favicon or other small image, but why bother?
just store the images on another server and merely serve up the HTML links...
Hi you need to first base64 encode the image and than send that serialized data through the esp, and than when you recieve the base64 encoded data you can decode it directly on the html client with a base64decode html command.
It is a good idea to encode and decode because base64 makes your image look like a-z letters and it gets rid of special characters that might break over the esp and the picture can be big or small it doesn't matter ive used base64 on 10mb images.
if the arduino doesn't already have a base64 library thats easy to use so that you can convert the image to base64 from the sd, than what you should do is use this website to convert all your images to base64 ahead of time. https://www.base64-image.de/
once you drag your image to the site click the button on the site that says copy image, and than you put that image string into a text file on your sd and than send that string line through the esp.
and when the webpage gets the string you should look up how to decode base64 images back to normal in html
so go to w3 schools online and see how they decode the image so it can be displayed in html.
all you have to do to send the data through the esp is just send the string through the tx pin
which is basically just putting the base64 text into the arduinos Serial.write("base64datahere") command
my base 64 encoded line looks like this in total:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAABFCAYAAAAvtjQgAAACqUlEQVRoge2YQW7cMAxFv4suAgQoIHSbla/gK/QsOdScJVfQFWaV7UBANu3OXdhMOTIpkbQnncV8wBjYlujnL4qSZ0BUr5jF6ycMkXD+ThpALSeQD4QgLo02P2Mw39wQHjn62IglJ56Edn9w7QjJ4EzfkYgTgRhtUi0nJDdIz417DWd0R6JOXKAncyOmDCJ1eALwez3KekSkwHwPhltEMAlLonKRK1LyCto6ckRy9iQ8w15HgOXNbyQbCLc3YQtU0J5JYRAp85+x5EGdCxymp8aM8g0Nl+TMDsVAuCsHAcWnL4fZmR8yyAnDprRbagGvJXV7QxyfIxSIAkedENYcfdHjRad+Iw2kdkRyQln49GSVOvDAms01RC/mqv7GSNoKcIgLdGd4287mqD99KUD9cIuMEIBn82zZOAchfCAeGCeEH4TD9HTT7xqmMWF++XF97f0DOJdYzPiid7AeILUeILUeILUeILXuBiSyee6tNXTfVeo9IDMATNMEACjnLDai+zlnF5AF5ArAKi9Q66YIkPPixJgAZfVFq5/2TOliE4APjQSSxkls3wPiJyaACcv521l25Ne49oMPaPACkN7Oyy/BvH8svwTyGccINACYU0oopTQbvgq5SjCkGgIATit/60Vzzv9ASF4ggqkhLAD82gYkChQBMIF4gSIALhArUARgAwIAFpgWUASAt9/UkShQFACsjnyC8Gl8lEMaAE1bYtgsegRgBUopYRyFAtIAkKSuvl6gKEAXZC+QN2fq1bc7lSUgPjRWAJ4fQGCrqDnkdaBW+A9fDpRzDgOQxI2RNzEts4arHhbgjj4n7hpkoES8haRh0UD+i7RZM5RSXItgT73Pidb0HQBgL1APwAKyC8gK4AFxAXkBjtCMpfjN0zTNdP5VD1eB9gb5C/ZBYF4WLxoMAAAAAElFTkSuQmCC
8bitbacon:
Hi you need to first base64 encode the image and than send that serialized data through the esp, and than when you recieve the base64 encoded data you can decode it directly on the html client with a base64decode html command.It is a good idea to encode and decode because base64 makes your image look like a-z letters and it gets rid of special characters that might break over the esp and the picture can be big or small it doesn't matter ive used base64 on 10mb images.
if the arduino doesn't already have a base64 library thats easy to use so that you can convert the image to base64 from the sd, than what you should do is use this website to convert all your images to base64 ahead of time. https://www.base64-image.de/
once you drag your image to the site click the button on the site that says copy image, and than you put that image string into a text file on your sd and than send that string line through the esp.and when the webpage gets the string you should look up how to decode base64 images back to normal in html
so go to w3 schools online and see how they decode the image so it can be displayed in html.
all you have to do to send the data through the esp is just send the string through the tx pin
which is basically just putting the base64 text into the arduinos Serial.write("base64datahere") commandmy base 64 encoded line looks like this in total:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAABFCAYAAAAvtjQgAAACqUlEQVRoge2YQW7cMAxFv4suAgQoIHSbla/gK/QsOdScJVfQFWaV7UBANu3OXdhMOTIpkbQnncV8wBjYlujnL4qSZ0BUr5jF6ycMkXD+ThpALSeQD4QgLo02P2Mw39wQHjn62IglJ56Edn9w7QjJ4EzfkYgTgRhtUi0nJDdIz417DWd0R6JOXKAncyOmDCJ1eALwez3KekSkwHwPhltEMAlLonKRK1LyCto6ckRy9iQ8w15HgOXNbyQbCLc3YQtU0J5JYRAp85+x5EGdCxymp8aM8g0Nl+TMDsVAuCsHAcWnL4fZmR8yyAnDprRbagGvJXV7QxyfIxSIAkedENYcfdHjRad+Iw2kdkRyQln49GSVOvDAms01RC/mqv7GSNoKcIgLdGd4287mqD99KUD9cIuMEIBn82zZOAchfCAeGCeEH4TD9HTT7xqmMWF++XF97f0DOJdYzPiid7AeILUeILUeILUeILXuBiSyee6tNXTfVeo9IDMATNMEACjnLDai+zlnF5AF5ArAKi9Q66YIkPPixJgAZfVFq5/2TOliE4APjQSSxkls3wPiJyaACcv521l25Ne49oMPaPACkN7Oyy/BvH8svwTyGccINACYU0oopTQbvgq5SjCkGgIATit/60Vzzv9ASF4ggqkhLAD82gYkChQBMIF4gSIALhArUARgAwIAFpgWUASAt9/UkShQFACsjnyC8Gl8lEMaAE1bYtgsegRgBUopYRyFAtIAkKSuvl6gKEAXZC+QN2fq1bc7lSUgPjRWAJ4fQGCrqDnkdaBW+A9fDpRzDgOQxI2RNzEts4arHhbgjj4n7hpkoES8haRh0UD+i7RZM5RSXItgT73Pidb0HQBgL1APwAKyC8gK4AFxAXkBjtCMpfjN0zTNdP5VD1eB9gb5C/ZBYF4WLxoMAAAAAElFTkSuQmCC
thanks i try it and if i had a problem i will ask you.
8bitbacon:
Hi you need to first base64 encode the image and than send that serialized data through the esp, and than when you recieve the base64 encoded data you can decode it directly on the html client with a base64decode html command.It is a good idea to encode and decode because base64 makes your image look like a-z letters and it gets rid of special characters that might break over the esp and the picture can be big or small it doesn't matter ive used base64 on 10mb images.
if the arduino doesn't already have a base64 library thats easy to use so that you can convert the image to base64 from the sd, than what you should do is use this website to convert all your images to base64 ahead of time. https://www.base64-image.de/
once you drag your image to the site click the button on the site that says copy image, and than you put that image string into a text file on your sd and than send that string line through the esp.and when the webpage gets the string you should look up how to decode base64 images back to normal in html
so go to w3 schools online and see how they decode the image so it can be displayed in html.
all you have to do to send the data through the esp is just send the string through the tx pin
which is basically just putting the base64 text into the arduinos Serial.write("base64datahere") commandmy base 64 encoded line looks like this in total:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAABFCAYAAAAvtjQgAAACqUlEQVRoge2YQW7cMAxFv4suAgQoIHSbla/gK/QsOdScJVfQFWaV7UBANu3OXdhMOTIpkbQnncV8wBjYlujnL4qSZ0BUr5jF6ycMkXD+ThpALSeQD4QgLo02P2Mw39wQHjn62IglJ56Edn9w7QjJ4EzfkYgTgRhtUi0nJDdIz417DWd0R6JOXKAncyOmDCJ1eALwez3KekSkwHwPhltEMAlLonKRK1LyCto6ckRy9iQ8w15HgOXNbyQbCLc3YQtU0J5JYRAp85+x5EGdCxymp8aM8g0Nl+TMDsVAuCsHAcWnL4fZmR8yyAnDprRbagGvJXV7QxyfIxSIAkedENYcfdHjRad+Iw2kdkRyQln49GSVOvDAms01RC/mqv7GSNoKcIgLdGd4287mqD99KUD9cIuMEIBn82zZOAchfCAeGCeEH4TD9HTT7xqmMWF++XF97f0DOJdYzPiid7AeILUeILUeILUeILXuBiSyee6tNXTfVeo9IDMATNMEACjnLDai+zlnF5AF5ArAKi9Q66YIkPPixJgAZfVFq5/2TOliE4APjQSSxkls3wPiJyaACcv521l25Ne49oMPaPACkN7Oyy/BvH8svwTyGccINACYU0oopTQbvgq5SjCkGgIATit/60Vzzv9ASF4ggqkhLAD82gYkChQBMIF4gSIALhArUARgAwIAFpgWUASAt9/UkShQFACsjnyC8Gl8lEMaAE1bYtgsegRgBUopYRyFAtIAkKSuvl6gKEAXZC+QN2fq1bc7lSUgPjRWAJ4fQGCrqDnkdaBW+A9fDpRzDgOQxI2RNzEts4arHhbgjj4n7hpkoES8haRh0UD+i7RZM5RSXItgT73Pidb0HQBgL1APwAKyC8gK4AFxAXkBjtCMpfjN0zTNdP5VD1eB9gb5C/ZBYF4WLxoMAAAAAElFTkSuQmCC
this is an example code for display base64 image in html file
Taken from wikpedia
i want to send this code via esp and show image to local IP that i enter in my browser.now i have dynamic image source. because for different image,image source is different.what should i do?
oh so you are hosting in esp, so put the this whole script in the sd and send it out to the client and use one of the server examples for esp8266 sd servers
You won't have any of these problems if you program the ESP directly. It contains a great web server library, and you can save the images to the flash memory, which is much faster.
Take a look at this example.
That's all the code you need for a complete web server that serves files from the file system. Just upload your files to the ESP (just click Tools > ESP8266 sketch data upload) and you're good to go. Depending on the module you're using, you can have up to 3MB of files.
Take a look at the next chapter if you want to be able to upload files over WiFi as well.
Pieter
To make a base64 library you need to store each base64 string in a javascript array and access it like that from html.
Look at the various AsyncWebServer libraries and their offshoots out there used in conjunction with the SPIFFS onboard filesystem. On newer versions of the libs, there are better block-fs emulation capabilities, but even with the emulated directories, you can still serve up file content rather easily.
But you definitely need an asynchronous server to send anything other than small file content. The ESP connection will 'hiccup' too much causing a lot of larger downloads to fail or be corrupt. The Async server code can handle sending larger files better especially if multiple streams are open at once such as when a browser first starts parsing an HTML file.