This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 5.0.0
Committed At 2021-02-25 13:52:50 UTC



    Build Status

    A library for building base64 encoded images in elm


    WebGL for Elm do not support arrays, so I need to build lookup tables for that, to prevent doing it in preprocess was created this library that can convert matrix (List Int) into image, and then used in shader (Example3).



    Package provides tools for encoding elm data types into Image:

    • List Pixel
    • List (List Pixel)
    • Array Pixel
    • Array (Array Pixel)

    Where each Pixel is 4 channel color is Int (0xRRGGBBAA)

    Other way is use avh4/elm-color#Color:

    • List Color
    • List (List Color)
    • Array Color
    • Array (Array Color)

    Image can be encoded into Bytes with Image.toPng or Image.toBmp or directly to base64-url (Image.toPngUrl or Image.toBmpUrl) that can be used directly in img [src] (Example1).

    You can find package to use in your project and Demo.


    Package can take Bytes of png or bmp image (even those that some browsers can not display), and decode them to Image (Example2)

    Use case:


    Data to image

    import Base64
    import Html exposing (img)
    import Html.Attributes exposing (src)
    import Image
    import Image.Data as Image exposing (Image)
    import Image.Options
    main =
            imageData : Image
            imageData =
                    [ List.repeat 4 0xFFFF
                    , List.repeat 4 0xFF0000FF
                    , List.repeat 4 0xFFFF
                    , List.repeat 2 0x00FFFFFF
            pngEncodeBase64Url =
                Image.toPngUrl imageData
        img [ src pngEncodeBase64Url ] []


    Getting image from server

    import Http
       type Msg
           = GotImage (Result Http.Error (Maybe Image))
       getImage : Cmd Msg
       getImage =
               { url = "/image.png"
               , expect = Http.expectBytes GotImage Image.decode


    Create texture using base64 encoded image and load it as Texture

    textureTask = WebGL.Texture.load pngEncodeBase64Url
    -- then use resulting texture as lookup table

    You can use simple function to get data from lookup table, where color is pixel color from just created texture

    float color2float(vec4 color) {
        color.a * 255.0
        + color.b * 256.0 * 255.0
        + color.g * 256.0 * 256.0 * 255.0
        + color.r * 256.0 * 256.0 * 256.0 * 255.0;