Image to HTML table

Few years ago when I was on Front trends I heard very interesting story about improvements in delivery of emailers. Every developer knows that it isn’t easy to deliver complex email template. But one of the developers made a story about images in email templates. It was related with visibility of company when email client has blocked images and he cannot see the company logo because he can read only text from email. So how to deliver it without image? HTML TABLE!!!

It made me to create this simple script which will create a colorful HTML Table from source image.


    var Jimp = require("jimp");

    var imagePath = process.argv[2];

    function rgb2hex(rgb){
     rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
     return (rgb && rgb.length === 4) ? "#" +
      ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
      ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
      ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
    }

    Jimp.read(imagePath, function (err, image) {
        if (err) {
          console.log(err);
        } else {
          console.log('');

          for (var j=0; j');

            for (var i= 0; i < image.bitmap.width; i++ ) {
              var pixelColor = Jimp.intToRGBA(image.getPixelColor(i, j));

              console.log('');
            }
            console.log('');
          }

          console.log('
') } });

How to run it

All you need is to run this code inside folder with source code:

node index.js images/logo.png > test.html
  • images/logo.png - path of your image
  • test.html - file in which HTML Table should land

Github

Here you can find code on GitHub.

Sample

Here you can find sample table.

Enjoy!