JS图片转HTML

源创意来源于 https://zhuanlan.zhihu.com/p/26149301

(1).ImageMagick命令+Ruby(2.2+)实现,原理是获取图像像素颜色列表,经过ruby转成font和color,为了简化不引入html、head标签,并且body标签未闭合。(符合html5规范,浏览器能正常解析。font也可不必闭合,但当不闭合时,Safari会解析失败。)

convert image.png -resize 120x160 -depth 8 txt:|ruby -e 'puts %Q(<meta charset="utf-8"><meta name="viewport" content="width=device-width"><body style="min-width:1200px;font:10px/1em monospace;background:#000;text-align:center;white-space:nowrap;">) + ARGF.readlines.drop(1).slice_when{|*a| a.map{|x| x[/\d+,(\d+):/, 1] }.uniq.size != 1 }.map{|a| a.map{|b| %Q(<font color="#{b.split[2]}">爱</font>) }.join} * "<br>"' > image.html

(2).ImageMagick命令+awk实现,管道前面的命令和上面用Ruby实现一样(比使用Ruby稍短)

convert image.png -resize 120x160 -depth 8 txt:|awk 'BEGIN{print "<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><body style=\"min-width:1200px;font:10px/1em monospace;background:#000;text-align:center;white-space:nowrap;\">"}{gsub(/.+,/, "", $1)} NR !=1 {if(NR>2 && p!=$1) print "<br>";printf("<font color=\"%s\">爱</font>",$3)} {p=$1}'> image.html

没命令行工具的,就用下面的js生成把,生成后,主流浏览器可以直接下载保存。

X
限制最大240x320,太大会搞卡浏览器