fluidfractal/elm-image

A library for building images in elm

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:

• get image dimensions, without rendering image
• mirror image
• crop image (coming soon)
• change / update / remove color using Image.Advanced.map
• get image header inf (format, color, size..) Image.Advanced.info
• convert image from one format ot other

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;
    }