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 4.0.0
Committed At 2019-11-27 11:30:18 UTC

Modules

    README

    Build Status

    A library for building base64 encoded images in elm

    Motivation

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

    Usage

    Encoding

    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.

    Decoding

    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:

    Example1

    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 =
        let
            imageData : Image
            imageData =
                Image.fromList2d
                    [ List.repeat 4 0xFFFF
                    , List.repeat 4 0xFF0000FF
                    , List.repeat 4 0xFFFF
                    , List.repeat 2 0x00FFFFFF
                    ]
    
            pngEncodeBase64Url =
                Image.toPngUrl imageData
    
        in
        img [ src pngEncodeBase64Url ] []
    

    Example2

    Getting image from server

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

    Example3

    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) {
        return
        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;
        }