2007-11-13 17:44:53 -08:00
|
|
|
<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>
|
2008-01-09 21:49:18 -08:00
|
|
|
<input id="fill" type="checkbox">
|
|
|
|
|
Fill canvas with <input id="fillRGB" value="rgb(10,100,250)"> (instead of transparency).<br>
|
2007-11-13 17:44:53 -08:00
|
|
|
<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");
|
2008-01-09 21:49:18 -08:00
|
|
|
var fill = document.getElementById("fill");
|
|
|
|
|
var fillRGB = document.getElementById("fillRGB");
|
2007-11-13 17:44:53 -08:00
|
|
|
|
|
|
|
|
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);
|
2008-01-09 21:49:18 -08:00
|
|
|
if (fill.checked) {
|
|
|
|
|
ctx.fillStyle = fillRGB.value;
|
|
|
|
|
ctx.fillRect (0, 0, img.width, img.height);
|
|
|
|
|
}
|
2007-11-13 17:44:53 -08:00
|
|
|
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>
|
