Source code
Revision control
Copy as Markdown
Other Tools
<html>
<head>
<title>Image-to-html converter</title>
<style>
#img, #canvas, #span {
display: none;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAL0lEQVQ4jWP09vZ+xoAHuLi44JNmYMIrSwQYNWAwGMBCKJ737NlDWxeMGjAYDAAAak4FtfgpsBoAAAAASUVORK5CYII=);
}
</style>
</head>
<body>
<h2>Image-to-html converter</h2>
<p>Enter the relative path to an image file, and this will convert it
to a pure HTML representation (no images).</p>
<form onsubmit="start_convert(); return false;">
Path to image: <input type="text" id="filepath" size="60"><br>
<input id="fill" type="checkbox">
Fill canvas with <input id="fillRGB" value="rgb(10,100,250)"> (instead of transparency).<br>
<button type='submit'>Convert!</button>
<br><br>
<img id="img" onload="run_convert();"><canvas id="canvas"></canvas><span id="span"></span><br>
(img / canvas/ imghtml)
<br><br>
Result:<br>
<textarea id="textarea" rows="10" cols="80"></textarea>
</form>
<script>
var img = document.getElementById("img");
var canvas = document.getElementById("canvas");
var span = document.getElementById("span");
var textarea = document.getElementById("textarea");
var fill = document.getElementById("fill");
var fillRGB = document.getElementById("fillRGB");
function start_convert() {
try {
// Unhide stuff. They're initially hidden because the image shows a
// broken-image icon on first page load, and the canvas defaults to a
// large empty area.
img.style.display = "inline";
canvas.style.display = "inline";
span.style.display = "inline-block";
// Clear out any previous values.
textarea.value = "(loading image)"
span.innerHTML = "";
// Get the image filename
var input = document.getElementById("filepath");
img.src = input.value;
// We're done, let the onload handler do the real work.
} catch (e) {
alert("Crap, start_convert failed: " + e);
}
}
function run_convert() {
try {
textarea.value = "(rendering canvas)";
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, img.width, img.height);
if (fill.checked) {
ctx.fillStyle = fillRGB.value;
ctx.fillRect (0, 0, img.width, img.height);
}
ctx.drawImage(img, 0, 0);
// [r, g, b, a, r, g, b, a, ...]
var pixels = ctx.getImageData(0, 0, img.width, img.height).data;
var imghtml = "<table cellpadding='0' cellspacing='0' width='" +
img.width + "' height='" + img.height + "'>\n";
for (var y = 0; y < img.height; y++) {
imghtml += "<tr height='1'>\n";
textarea.value = "(converting row " + y + ")";
for (var x = 0; x < img.width; x++) {
var p = img.width * y * 4 + x * 4;
var r = pixels[p + 0];
var g = pixels[p + 1];
var b = pixels[p + 2];
var a = pixels[p + 3];
var alpha = (a / 255).toString();
alpha = alpha.substring(0, 6); // "0.12345678 --> 0.1234"
imghtml += " <td width='1' style='background-color: " +
"rgba(" +
r + "," +
g + "," +
b + "," +
alpha +
")'></td>\n";
}
imghtml += "</tr>\n";
}
imghtml += "</table>\n";
span.innerHTML = imghtml;
textarea.value = "<html><body>\n" + imghtml + "</body></html>";
} catch (e) {
alert("Crap, run_convert failed: " + e);
}
}
</script>
</body>
</html>