Obraz do tabeli HTML. Przekształcanie obrazu w tabelę HTML.

Kilka lat temu gdy byłem na Front trends usłyszałem bardzo interesującą historię o ulepszeniach w dostarczaniu mailerów.

Każdy developer wie, że nie jest łatwo dostarczyć złożony szablon email. Ale jeden z developerów opowiedział historię o obrazach w szablonach email. Było to związane z widocznością firmy gdy klient email zablokował obrazy i nie może zobaczyć logo firmy, ponieważ może czytać tylko tekst z maila. Więc jak to dostarczyć bez obrazu? TABELA HTML!!!

To skłoniło mnie do stworzenia tego prostego skryptu, który stworzy kolorową Tabelę HTML ze źródłowego obrazu.

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('<table style="border-collapse: collapse; width: '+image.bitmap.width+'px; border: 0">');

          for (var j=0; j<image.bitmap.height; j++)="" {="" console.log('<tr="">');

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

              console.log('<td style="height: 1px; width: 1px; padding: 0; border: 0; background-color:');
              console.log( rgb2hex('rgb('+pixelColor.r+','+pixelColor.g+','+pixelColor.b+')') );
              console.log('"></td>');
            }
            console.log('');
          }

          console.log('</image.bitmap.height;></table>')
        }
    });

Jak to uruchomić

Wystarczy uruchomić ten kod w folderze z kodem źródłowym:

node index.js images/logo.png > test.html

Github i przykład

Tutaj możesz znaleźć kod na GitHub.

Tutaj możesz znaleźć przykładową tabelę.

Enjoy!