On-the-fly Binary-to-Base64 Data Converter
Phil Pilgrim (PhiPi)
Posts: 23,514
The Spinneret seems to exhibit difficulties serving images when separate file references are embedded in the HTML. This is due to some browsers trying to open additional sockets for downloading the images, which the W5100 chip ignores (at least as it's been programmed to date). One work-around to this uses Javascript to force the images to load one at a time, beginning after all the HTML has been loaded. Another option is to encode the images inline in base64 format so that they become part of the HTML and don't require being loaded separately.
Attached is an object and demo that does base64 conversion on-the-fly. The advantage of on-the-fly conversion is that the base64 data can be fed to the W5100 line-by-line, rather than having to buffer an entire file's worth in RAM. Here is a listing of the demo program:
Here is the output it produces:
When sent to a browser, this is what the output looks like:
The advantage of using base64 is offset somewhat by the 33% more bytes the server has to send when encoded this way. However, by doing on-the-fly conversion, the the internal image storage requirements do not increase.
-Phil
Attached is an object and demo that does base64 conversion on-the-fly. The advantage of on-the-fly conversion is that the base64 data can be fed to the W5100 line-by-line, rather than having to buffer an entire file's worth in RAM. Here is a listing of the demo program:
CON
_clkmode = xtal1 + pll16x
_xinfreq = 5_000_000
OBJ
sio : "FullDuplexSerial"
b64 : "base64"
PUB Start | i, row
sio.start(31, 30, 0, 9600)
waitcnt(cnt + clkfreq)
sio.str(@html)
sio.str(b64.img(string("gif")))
repeat i from 0 to @image_end - @image - 1
sio.str(b64.out(image[i]))
sio.str(b64.end)
sio.str(@html_end)
DAT
html byte "<html><body>Propeller Forum Icon: ",0
html_end byte "</body></html>",0
image file "propeller.gif"
image_end
Here is the output it produces:
<html><body>Propeller Forum Icon: <img src="data:image/gif;base64, R0lGODlhJQAjAPcAAAICAgEBAQUFBQ4ODgoKChAQECA5PnYqJmc5PXg1NRJGOQB5 OlFeKUxcPlpoOzo+ck89RlA8X2s+RCRGWiRDVjJEVTpPUBlGaBZSbRBOdyVMYCxT bFlCS0lFUlRRXmRDS3NEQmxNV0VMYExRYk5WalJXa1NaalhccmdYZ2Nfc11ieV9l emxld4kvKogyL4QyMYs1NI07O4c5OZw4MpM8Oaw2L6UyK7Q2Lrs3L6s4Mt0+Ls46 MdI6MeQ+NOk/NO9ANfRBNvxCN/9EOIU/QYhIRn6GHQCKQkaZf2+8dXHEf4SLHYyU K/ePHveNH/+HHviYG/urFv+/EfeKILnXOf3NC/u/D/7eBf3SCf/rAvLtCv/wAP/z AP/1AP/2AP32B//6Av/+CO3yFc7kK9fhIInFX6POShdfgAZ1owBxsVlijWRqhWty jGhviHV1i2pumG52k3N5lXZ+nXN7mHd/oAB9wUtkz1Vy7Vl06kRn+0Zp+0lr+0tt +01u+09w+1Bx+1Jz+1V1+1d2+1t6/F17/F99/Fh3+1169mB+/C2HihmcvDatryyk sHqCnkCqm0m0n2K7iH2Fp3yEon+HqQKLxRCbzQCO3ACM1wCa2wCT1wCT4gCY4GOA /GWC/GeD/GmF/GuG/GyH/G6J/HGL/HKM/HSO/HeQ/HmS/HyU/H+X/HuU/JSKiYOL q4iOqoWOsYmSto2VtY6Xvo6XvYuUuY6Yv4+Yv4+YvIeQtZObvZCXt6Wmpo+ZwJCa wZGawZOcw5aewpOdxJWfxoKS2Jegx5ehyJmiyZuky5ulzJymzZ6ozpukx5+p0KCq zaGq0aOs0qSu1Kaw16ex2Kmy2a223au024CY/IOa/IWb/Iad/Iie/I+g6Iug/Y2i /Y+j9JCk/ZOn/ZGm/Zap/Zir/Zqt/Zan8p6w/Z+x+q+54LG64bK847O95LW+5aCy /aS1/aa2/aKz/ae4/am5/a++/a28/au7/bG//bjB6LLB/bXC/bfE/bnG/rvI/sDA wOjo6P////7+/v39/SwAAAAAJQAjAAAI/gADCARAsKDBgwgTHhSIp2GePHr07OHT x8+fP4ACFRI0iNChTZw6eQIVStQoUqVMnTpFrZqAAA4hSqRoEaNGjh5BiiRpEqWp VCyrWSMAAM/DiBP51My4cdCgjyFHljyZEmhLa9cGADg6U+lFphyf6hwJqmfVU6iE XsNWYCvSfnDjyp1Lly5WbNraIuXTj9k5Z7N6DRMm7Bk6dOmUwYKl65g0abx2EQZW rN9abdv0zuynzFyzWbt28dLlTJ26ep9n6TImbRovWrp26QLWD++2bnon9uH8d5Zv 38rQmUvHDJZqYo97zVo8izbmbt/a6vbTz9gzZLp+ERMGixi0Z9CY/g0jRp4Zs16/ iiHb9avf7W/e2tL8048YLFq8lJ17RqtXsWHDNHPOgM0sxgty5vyySz/QeQNOWxVh 1M8x9/GCzH6q9RIZMqbVA80ssBEzTYK09AMfOOG0ZREggFR33y76PaPLb7MYg845 6TxjnC7DjAjMLP04GI44bWEESCH/EIPfL8dEw4wuvADzyyzCRBMNNMrsEosssvji Syut8MMNikQCwGIgdvCDiy/CIMOLK7LEIuIzXPJSiyyu1PIKK4ywoYYaa+wTzDji kNPWkXbUkYsKbMTBpxxzRNKKL7fMIQccb6yhxgoecIBAAi+48AIIaWRDzjptaWTH AzPgUAMM/whA0IEIJDC6RgmycpBADTz8EIQQQgQhrBAwZLOOO21tZMcLwQobxA89 7IDDDTa0cIAOLSQgQww0zHDDDj4AMWwO47jDTlscGRJBD84CAe0OOQwRQgojMGBC MrTE8kstksDBQghDxECEG+Ww005bHR1yhyofSCDBByi0wcoyxbQCyQgLWHALnKId iI466UTzj7ntvNNWTpz08xsszKQzTTOtvKGGAUYoIMcbcUjiir44CtePwe/A0xZU nfSjy9HdLYNLJCVU0EARSyjhQAUiqBHHKrFE81g0/ZQMzzxtjVVdNM3I0gojJVyA yBRgROEEFF+IcUQGI7wBSZvIKNNP0P7zyNNWVJ9MaM4zkLBRARqOhPGFFUwwIQUV X3iRBB0TqABJLFH287U88bQl0iegTBiNL2pMYIkiWWzRRRVSOA7FFltw8UgmGJwA iSwLwsN55wB4Anoo1TUTCQWYUDLGFlpsAUXrTTyBRfJZLKIJBitIAks/u9vT1u+i 9COMJBVMkgkZXSSPxRNNNM6EFchzMQUmmGgQhy3+xBMPPdoDwBMp9alwhiaJSF3y GKe+x3FBC8lrRCYmQYJW1A9/92hLSUjBP2Rs4BKVQEL5tMCFK7SucVKowga7UIZK XMIMq/AHBPHRFrPU5YUwjIs97nEPFgKAKipBxVVs041uCEkchWA6FtC+Zj8I1tCG PkHLDjFzGyEN6VQk4xvnjIgPfOSjLSlRolDw8hwnBjGKm7vfDI+YjysCIIdXuYY2 uggOMkFxiH0TIw2rWEZ9DCAAAiDAAArAxz768Y+ADGQfB0CAgAAAOw==" /> </body></html>
When sent to a browser, this is what the output looks like:
The advantage of using base64 is offset somewhat by the 33% more bytes the server has to send when encoded this way. However, by doing on-the-fly conversion, the the internal image storage requirements do not increase.
-Phil
186 x 52 - 2K
