fth-ship / image2css

Convert images to CSS using box-shadow

Convert image To CSS automatically

This is an experiment, so, probably you don't want and you won't use images as box-shadow around the web, right? So, try this demo!

Demo!

How it work?

image2css draw the image(s) in a canvas element, and get the imageData from the canvas (imageData is a big array with the RGBA of each pixel of the image), we parse the imageData looking for each pixel, and then we write the box-shadow! We also use RGBA or HEX when appropriate (to improve the final size and keep image quality), image2css also doens't use units in 0 values (to improve the final size), all pixels that is alpha 0 aren't writen in the box-shadow rule (to improve final size)

How to use

Well, you can use it anywhere with bower

bower install image2css --save

And include de lib in your page

<script src="bower_components/image2css/lib/image2css.js"></script>

This file exports a global function called image2css, see below how to use it:

image2css({
  images: ['path/to/image1', 'path/to/image2']
}, function (images) {
  // Sucess! Yeah!

  // Now you have an array `images` with the result
}, function () {
  // Something went wrong! "Yes! Currently this callback is never called" :P
})

In the success callback, images has a array with these properties:

• image.boxshadow: all box-shadow generated
• image.bytes: the size of the box-shadow in bytes, its a interger
• image.filename: the URL of the file, or base64 or something else with the origin of the image
• image.index: the index of the current image, passed in the images property
• image.size: The size of the generated box-shadow treated as bytes, KB, MB etc...

Helpers

We have some helpers too

image2css.RGBToHex: Convert any RGB color to hexadecimal, like this!

  var hex = image2css.RGBToHex(255, 255, 255)

  console.log(hex) // #ffffff

image2css.bytesToSize: Convert bytes to your correspondent size, like this!

  var size = image2css.bytesToSize(1000)

  console.log(size) // 1.00 KB

  var otherSize = image2css.bytesToSize(240)

  console.log(otherSize) // 240 Bytes

image2css.lengthInUtf8Bytes: Return the size of a string with UTF-8 characters, like this!

  var size = image2css.lengthInUtf8Bytes('This is a string')

  console.log(size) // 16

Cheers!

🐷