JSFiddle - React, Tailwind, and code Playground
HTML
<input type="file" id="imageUpload" multiple="multiple" accept="image/*"/>
<hr/>
<textarea id="out"></textarea><br/>
<a id="link" href="//12Me21.github.io/syntax/type">Highlighter</a>
JavaScript
//uploader is the <input> element.
//callback is called
//callback2 is called MULTUPLE TIMES, when each image loads.
function uploadImages(uploader, callback) {
"use strict";
uploader.onchange = function () {
var reader = new FileReader();
var i = 0;
var images = new Array(uploader.files.length);
reader.onload = function () {
images[i] = new Image();
images[i].onload = function () {
i += 1;
if (i < uploader.files.length) {
reader.readAsDataURL(uploader.files[i]);
} else {
callback(images);
}
};
images[i].src = reader.result;
};
reader.readAsDataURL(uploader.files[0]);
};
}
function convert(data, isLast) { //do the thing
"use strict";
var string = "";
var byte;
var char;
var bit;
for (byte = 0; byte < data.length; byte += 8) {
char = 0;
for (bit = 0; bit < 8; bit += 1) {
char |= +(data[(byte + bit) * 4] > 127) << 7 - bit;
}
string += String.fromCharCode(char);
}
if (isLast) {
string = string.replace(/\u0000+$/, "");
}
try {
//I don't give a fuck if escape() is depricated, I NEED it to convert from UTF-8.
return decodeURIComponent(escape(string));
} catch (ignore) {
return "Error: Invalid UTF-8 Sequence";
}
}
window.onload = function () {
"use strict";
var canvas = document.createElement("canvas");
var c2d = canvas.getContext("2d");
var out = document.getElementById("out");
var link = document.getElementById("link");
uploadImages(document.getElementById("imageUpload"), function (images) {
var code = "";
images.forEach(function (image, i, images) {
canvas.width = image.width;
canvas.height = image.height;
c2d.drawImage(image, 0, 0);
code +=...