Home   Archive   Permalink



Making a base64 image

I use, many times, the technique from the REBOL cookbook for making a base 64 encoding of an image. The core of it is this line clipped out of the cookbook article:
    
image: read/binary file
save %image-data.txt image
    
I have a situation where I want to capture that encoding and embed it in a web page, so I don't need the intermediate file as suggested above. To accomplish that, I do the same thing as the cookbook article except that I "save" to the clipboard, as shown here:
    
CURRENT-FILE-BINARY: read/binary CURRENT-FILE
save clipboard:// CURRENT-FILE-BINARY
HTML-BASE64-IMAGE: read clipboard://
    
This works and all is well, but I am wondering; can I just "save" to a word instead of "save" to a file or the clipboard? I can't embed into html the results of a "read/binary" because that is binary. It seems the "save" operation is needed to get the text-based base64 encoding. Is there some other way to accomplish that without writing to some intermediate area?

posted by:   Steven White       1-Nov-2017/8:38:19-7:00



This example is from http://re-bol.com/examples.txt . It includes compression, but you can eliminate that:
    
system/options/binary-base: 64
editor picture: compress to-string read/binary to-file request-file/only
view layout [image load (to-binary decompress picture)]
    
logo-pic: load to-binary decompress #{
789C018A0375FC89504E470D0A1A0A0000000D49484452000000640000001808
020000008360CFB90000001374455874536F667477617265005245424F4C2F56
6965778FD916780000033249444154789CD599217402310C86F7CE6227B1481C
1637874362B1382C1687C4A15168240A89C5A2B058ECDEBE47DFFA429276DCEE
10FDCD582F97267FD33F2D7CF47ABDCF32D1ED76E7F3F9ED76FB4EE0743A8D46
A3B6A683A80FFE540562381C1E8FC7144D12DBEDB6951C3B9D4E91648DC7E34C
41B925465D349C14A2CA230BA65EA729E27C3E37CCB43CB228905A3525B1DBED
9A4CED93851C7C193088A0667C0D0603FB5640BFDFB7F648C0D0836B1C41C22E
11D7EBF57038F074BFDF534429BE2693891B4626CE1C59BC7CB95CDC99EEF7FB
66B349F922D65A4B4A8DE0D0B547B9DD85212B6B4CB4D3E994B055FEE8943566
30134626BBDA64052C974BD757A637B1DA2E599959A05EE61F4032D62C55EFBC
6EED01878954188DC80AE714C07126D24F91BBBE6265A129B3D96C2A4085BB64
459FEBF51A1B2692E5A9FA17A428B562EBE595A1F29650AD5C6B9525FD4621E0
A95D73491606F9046C94101A06178B4518E19122023655DA184B03ECA15BE98E
6D9D302E536E8D2C96A5FF0061458FEE9EAA045958720EDCFC82CF145A9E2C7C
52BC6CF0503B8C2B2200DAACD24698A4B710361E6421930E05A85E9484BE51B3
0885AE9727CB22A5591981B73D1AC6A58D2ABD5892DF46C5993DCFF25BC8828E
14538AACEB3390A43C59D890213B5D2AA3D2AC3C59ABD54ACE2E85C29E36DE42
162B8C0AC47F0942B512972CCCF0D91170ED6594ECC130288549ED44744DE52C
771381C571D5AFEDB14B2E79CB022F13C834A056049EFCE35C2A7449877A2B00
2D872635082FEA2D267D8BC047AD910D3875CE9247078A826259FC8234F264E1
9FAD4AAC52015465D973193B3755B611B417FB562A0C66C77EF7001F5463FD83
2CF20F83B2B8E0C22DAE760FA556B32AAF87B86A18C18259CFAA3567C250C7C3
1AE72CD95350531BD93FAE3B6CEADB33188174FCBBD77B7B7A0841DAB6C3EBEE
F13DE8696B6455E222ADCE23F162ECF644064709A47AA8FD3632BFAD78EA5E92
D947500C3BB04CAD419F3D5B05580DC127118E3D2866CAFB8AC6CAFCEB68F895
56796455CF47AAD741F5B957D4D751245980BD569729B723D742A964558FFB4D
EAB6A440BF6ACE54157EB028F7A730B695BDF749D05EA9C1B612C4CF0F396EDC
8E943F5C020000000049454E44AE426082CAEBA2D78A030000
} ; this example embedded image was created with the script above
view layout [image logo-pic]
    
    
Here's another example from the same page:
    
R E B O L [title: "NS Basic Image Uploader"]
image-name: request-text/title/default
     "ID property of image widget:" "Image1"
system/options/binary-base: 64
x: at (form read/binary to-file my-file: request-file/only) 4
y: parse form x "^/"
z: rejoin [
     {myimage="data:Image/} (at form suffix? my-file 2)
     {;base64,"}
]
len: length? y
for i 2 (len - 1) 1 [
     append z rejoin [
         newline {myimage=myimage & "} (pick y i) {"}
     ]
]
append z rejoin [
     {^/^/} image-name
     {.innerHTML="<img src='" & myimage & "'/>"}
]
print rejoin ["sending: " form last split-path my-file]
write [
     scheme: 'FTP
     host: "site.com"
     port-id: 21
     target: join "/share_image/" form last split-path replace my-file
     user: "user@site.com"
     pass: "pass"
] z
print "DONE"
halt
    
I think you should also be able to do this:
    
x: enbase/base read/binary request-file/only 64

posted by:   Nick       1-Nov-2017/10:04:30-7:00



Yes, thank you, "enbase" was the trick, and it was right there in the function dictionary. What amazes me most about this is that you remembered it; you must have that thing memorized. Anyway, I made myself a little "note."
    
IMGTAG: func [
     FILENAME
     ALTDESC
] [
     return rejoin [
         {<img alt="} ALTDESC {" }
         {src="data:image/}
         at form suffix? FILENAME 2
         {;base64,}
         enbase/base read/binary FILENAME 64
         {">}
     ]
]

posted by:   Steven White       3-Nov-2017/10:52:11-7:00



Google usually does a great job. Search "Rebol base64".
    
I put my most used tricks in the tutorials, and that examples.txt link has a very large percentage of the code from the tutorials. A quick search through it usually reminds of previous examples.

posted by:   Nick       4-Nov-2017/1:48:56-7:00