サイトアイコン Lonely Mobiler

画像をHTMLに変換するスクリプト書いてみた

最近エクセルとかパワーポイントとかで絵を書くのが流行ってるらしいのだけど絵心無いので画像ファイルをHTMLで出力するスクリプト書いた。

先に出力結果。

ソース見ればわかるけど1ドット1divで作ってます。あんまりでかい画像をいれると出力されるHTMLが数十MByteとかなってブラウザで開くのが困難になったので50x50程度の小さな画像のピクセルを大きくしてます。。。

以下ソース。php と gd が必要です。

<?php

$file_name = $argv[1];

if (!file_exists($file_name)) { echo "file not exists...\n"; return -1; }

$gd = imagecreatefromjpeg($file_name); if (!$gd) { $gd = imagecreatefrompng($file_name); if (!$gd) { $gd = imagecreatefromgif($file_name); if (!$gd) { exit; } } }

$dotsize = 5;

$width = imagesx($gd); $height = imagesy($gd);

$div = '<div class="dot" style="background:#%02x%02x%02x;left:%dpx;top:%dpx;"></div>'; $bgdiv = '<div style="width:%dpx;height:%dpx;position:absolute;z-index:1;background:#%02x%02x%02x;"></div>';

$colors = array(); $dots = array(); $bgica = ''; $html = '';

for ($x=0; $x<$width; $x++) { for ($y=0; $y<$height; $y++) { $ica = imagecolorat($gd, $x, $y); $dots[] = array('x' => $x, 'y' => $y, 'ica' => $ica);

if (array_key_exists($ica, $colors)) { $colors[$ica] += 1; } else { $colors[$ica] = 1; } } }

arsort($colors); foreach ($colors as $key => $val) { if (!$bgica) { $bgica = $key; break; } }

foreach ($dots as $dot) { if ($bgica == $dot['ica']) { continue; } $ic = imagecolorsforindex($gd, $dot['ica']); $html .= sprintf($div, $ic['red'], $ic['green'], $ic['blue'], $dot['x'] * $dotsize, $dot['y'] * $dotsize); }

$bgic = imagecolorsforindex($gd, $bgica); $bghtml = sprintf($bgdiv, $width * $dotsize, $height * $dotsize, $bgic['red'], $bgic['green'], $bgic['blue']);

$html = '<div style="position: relative; width: ' . $width * $dotsize . 'px; height:' . $height * $dotsize . 'px;"> <style scoped> .dot { position: absolute; z-index: 2; width: ' . $dotsize . 'px; height: ' . $dotsize . 'px; } </style> ' . $bghtml . $html . '</div>';

echo $html;

実用性は無い、かなぁ。無いだろうなぁ。

Sponsored Link
モバイルバージョンを終了