Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do you feel about base64 encoding images? #26

Open
fonsp opened this issue Nov 7, 2020 · 2 comments · May be fixed by #36
Open

How do you feel about base64 encoding images? #26

fonsp opened this issue Nov 7, 2020 · 2 comments · May be fixed by #36

Comments

@fonsp
Copy link
Member

fonsp commented Nov 7, 2020

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?

@yurivish
Copy link
Collaborator

yurivish commented Nov 7, 2020

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)).

@schneiderfelipe
Copy link
Contributor

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

renderdomchild(io, rctx::RenderContext, ctx, x) =
showable(MIME("text/html"), x) ? show(io, MIME("text/html"), x) : printescaped(io, x, escapechild(ctx))

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants