Hyperscript.jl icon indicating copy to clipboard operation
Hyperscript.jl copied to clipboard

How do you feel about base64 encoding images?

Open fonsp opened this issue 5 years ago • 2 comments

using Images

img = load("my dog.jpg")

@assert Base.showable(MIME"image/jpeg"(), img)

m("div", x)

Gives me

<div>
Images.Image{blablalba} blablab
</div>

Hyperscript.jl could check Base.showable for MIME types like images and audio, and base64-encode the result. This would give

<div>
<img src="data:image/jpeg;base64,blablablalblkdjflgj42i9832d..." />
</div>

Do you think that this fits within the scope of the project?

fonsp avatar Nov 07 '20 12:11 fonsp

That seems like totally reasonable functionality to want for something like Pluto. Hyperscript should allow adding functionality like that with a line or two, if it doesn't already. Have you been able to get this working from the outside? If it's painful, I could imagine the addition of something like a Hyperscript.lower function that defaults to Hyperscript.lower(x) = x but could be overridden for e.g. Hyperscript.lower(im::Image) = m("img", src=base64_encode(im)).

yurivish avatar Nov 07 '20 20:11 yurivish

Hyperscript could use something like the following:

julia> using Images, Hyperscript

julia> using Base64: stringmime

julia> datauri(mime, x) = "data:$(mime);base64,$(stringmime(mime, x))"
datauri (generic function with 1 method)

julia> img = load(download("https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png"))
1×1 Array{RGBA{N0f8},2} with eltype RGBA{N0f8}:
 RGBA{N0f8}(0.0,0.0,0.0,0.0)

julia> m("img", src=datauri("image/png", img))
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAN9JREFUeAHtwSEBAAAAgzAE/TO/BuKbXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXMoAPVABkd5u1L8AAAAASUVORK5CYII=" />

I think the best place for this would be in https://github.com/JuliaWeb/Hyperscript.jl/blob/a0afe27a9f51dca9c3aa14cf4ed0b757e0aaeff7/src/Hyperscript.jl#L241-L242

I'm preparing a PR for this if that's OK.

schneiderfelipe avatar May 26 '21 21:05 schneiderfelipe