CellGrid.Image

Render a cellgrid as a bmp or png image

Data URI

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="

Bytes

asBmpBytes : CellGrid Color -> Bytes

Encode a CellGrid as a bmp image.

asPngBytes : CellGrid Color -> Bytes

Encode a CellGrid as a png image.

jxxcarlson/elm-cell-grid/8.0.1

CellGrid.Image

Data URI

Bytes

Modules