Visualize Image on Franklin

• In this page we will show how to display images on your website built with Franklin.jl. Let's load sample image provided by TestImages.jl

using TestImages
using ImageShow

• To display an image, we are going to encode the data to base64. Then we embed the base64 image into Raw HTML. Here is my implementation to achive our purpose:

# Reference:
# https://github.com/JuliaImages/ImageShow.jl/blob/master/src/showmime.jl#L115

using Base64

function encodeimage(io::IOBuffer, img)
    io2=IOBuffer()
    b64pipe=Base64EncodePipe(io2)
    write(io,"<img style='display:inline' src="data:image/png;base64,")
    show(b64pipe, MIME"image/png"(), img) # will be valid if we load ImageShow.jl
    write(io, read(seekstart(io2)))
    write(io,"">")
end

function fdimage(img)
    io = IOBuffer()
    encodeimage(io, img)
    println("~~~")
    println(String(take!(buf)))
    println("~~~")
end

Examples

Example 0.1.1 (cameraman)

c = testimage("cameraman.tif")
c = testimage('c')
buf = IOBuffer()
encodeimage(buf, c)
fdimage(c)

Example 0.1.2 (mandrill)

m = testimage("mandrill.tif")
buf = IOBuffer()
encodeimage(buf, m)
fdimage(m)

Different solution

c = testimage("c")
println("~~~")
show(stdout, "image/svg+xml", c)
println("~~~")