Convert image to pure CSS art with box shadow
Try in browser

Getting Started

Use as CLI:

make build_cli
./image2css --input path/to/image --output output/css/file

Options:

-i, --input       Path to input image. Only support PNG, JPG and GIF
-o, --output      Path ot output CSS file. Default: path/to/input/image/image-name.css
-s, --selector    CSS selector to render CSS. Default: #target
-w, --width       Target image width. Default: input image width
-h, --height      Target image height. Default: input image height
-r, --resolution  Size (in px) of one shadow box. 1 = best resolution. Default: 5

Note: try to keep the number of shadows less than 10000

Browser might freeze if there are more

shadows number = width * height / (resolution ** 2)

Use as WASM module:

make build_wasm
open docs/index.html

Use as a Go package:

go get github.com/dthung1602/image2css

package main

import (
    "os"
    "image"
    image2css "github.com/dthung1602/image2css/pkg"
)


func main() {
    f, _ := os.Open("path/to/image.png")
    img, _, _ := image.Decode(f)
    img = image2css.ScaleImage(img, 300, 400) // Rescale the image if you like

    resolution := 4
    cssSelector := "#my-image"
    css := image2css.GenCSS(img, resolution, cssSelector)
    // do something with the css string
}

License

Distributed under the WTFPL License.

You just DO WHAT THE F*CK YOU WANT TO

Contributing

Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Duong Thanh Hung - dthung1602@gmail.com

Project Link: https://github.com/dthung1602/image2css

Acknowledgements

• Original PHP implementation
• Black chancery font
• Font awesome
• Ace editor
• Img Shields
• Best README template