Render a cellgrid as a bmp or png image
Data URIs using the base64 encoding are a way to create an image from binary data in the browser. This makes it possible to generate an image in pure elm and display it using HTML.
import CellGrid exposing (CellGrid, Dimensions)
import CellGrid.Image
import Color exposing (Color)
import Html
import Html.Attributes exposing (height, src, style, width)
grid : CellGrid Color
grid =
CellGrid.repeat (Dimensions 2 2) Color.red
main : Html msg
main =
Html.img
[ src (CellGrid.Image.asBmpUri grid)
, width 300
, height 300
, style "image-rendering" "pixelated"
]
asBmpUri : CellGrid Color -> String
Encode a CellGrid
as a bmp URI.
import CellGrid exposing (CellGrid, Dimensions)
import Color exposing (Color)
grid : CellGrid Color
grid =
CellGrid.repeat (Dimensions 2 2) (Color.red)
asBmpUri grid
--> "data:image/bmp;base64,Qk1GAAAAAAAAADYAAAAoAAAAAgAAAAIAAAABABgAAAAAABAAAAATCwAAEwsAAAAAAAAAAAAAAADMAADMAAAAAMwAAMwAAA=="
asPngUri : CellGrid Color -> String
Encode a CellGrid
as a png URI.
import CellGrid exposing (CellGrid, Dimensions)
import Color exposing (Color)
grid : CellGrid Color
grid =
CellGrid.repeat (Dimensions 2 2) (Color.red)
asPngUri grid
--> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGklEQVR4nD3GsQEAAADBsPr/NT9hkikyhHkKJwYDmXkNWg4AAAAASUVORK5CYII="
asBmpBytes : CellGrid Color -> Bytes
Encode a CellGrid
as a bmp image.
asPngBytes : CellGrid Color -> Bytes
Encode a CellGrid
as a png image.