Lo que podrías hacer es quizás un código más pequeño que genere una imagen de más mala calidad y abusar del navegador para ejecutarlo. Realmente nunca lo probé pero quizás se pueda.Me refiero a en lugar de poner:
https://google.com/favicon.icoponer:
javascript:pintarHorizontalLineas("0-98", "azul");pintsrHorizontalLineas(99, "verde", "23-84"); ...
O quizás con un data:
data:text/html,<script>pintarHorizontalLineas("0-98", "azul");pintsrHorizontalLineas(99, "verde", "23-84"); ...</script>
Hay más formas, igual alguna te funciona.
Quizás puedas mezclar varias cosas: Simplificar las imágenes, reducirle el tamaño utilizando algoritmos de compresión para expandirla luego con código. Utilizar codificaciones óptimas como trabajar con caracteres ascii en lugar de su homólogo en bytes... Convertir colores muy similares en el mismo para mejorar la compresión a costa de calidad. Convertir imágenes a jpg de alta compresión y baja resolución...
También hay algoritmos para apartir de imágenes de baja calidad ampliarlas y mejorarlas.
Desde luego no es algo nimio, pero no es imposible hacer algo decente con mucho curro creo yo. Quizás incluso te podría rentar más aprovecharte de como leen los lectores de QR para juguetear con ello y que procese más info de la que hay.
Te dejo un script sencillo que hice para que no me copien imágnes. Le pones la url de una imagen, te extrae los píxeles y te la recrea con tags. A ti la parte que te interesa es la de extraer la imagen, meterla en el canvas y obtener los colores de los píxeles. A partir de ahí es cosa tuya representar la misma info con menos espacio.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OCR</title>
<script>
/* SHORTCUTJS lib by StringManolo.
Use of the global Scope to code faster, reduce file sizes, reduce memory usage and make some code more readable/compact. Readable Version */
(function (){
DEFINE=function(constant, value) {
if(window[constant]===undefined) {
window[constant] = value
} else {
throw new ReferenceError(constant + " is already a property of the global/window Object.\nRedefinition not allowed.");
}
}
wrapQS=function(selector) {
return d.querySelector(selector)
}
wrapQSA=function(selector) {
return d.querySelectorAll(selector)
}
wrapAEL=function(elemnt, event, value) {
elemnt.addEventListener(event, value);
}
wrapDCE=function(element) {
return d.createElement(element);
}
wrapUCOU=function(url) {
return URL.createObjectURL(url)
}
DEFINE("d", window.document);
DEFINE("w", window);
DEFINE("$", wrapQS);
DEFINE("$$", wrapQSA);
DEFINE("dw", d.write);
DEFINE("_", window.alert);
DEFINE("ael", wrapAEL);
DEFINE("dce", wrapDCE);
DEFINE("ucou", URL.createObjectURL);
})();
</script>
</head>
<body>
<canvas id="canv" width="300" height="300"></canvas>
<div id="output"></div>
<!-- <a href="" id="a">click here to download your file</a> -->
<style>
canvas {
background-color: blue;
}
body {
background-color: #000;
font-size: 2px;
}
span {
padding: 0;
letter-spacing: -1;
}
</style>
<script>
/* DOWNLOAD IMAGE CROSSORIGEN: (to avoid tainted canvas) */
const request = fetch("https://cors-anywhere.herokuapp.com/" + prompt("Introduce URL de imagen. Ej: google.com/favicon.ico"));
request.then(function(resp) {
return resp.blob();
}).then(function(blob) {
let img = dce("img");
const blobURL = ucou(blob);
img.src = blobURL;
img.id = "imagen";
d.body.append(img);
_("Imagen añadida");
}).then(function(){
ael($("#imagen"), "load", function(){LIIC()});
}).catch(function(error) {
_("Error: " + error);
})
/* LOAD IMAGE INTO CANVAS */
function LIIC() {
let canvas = $("#canv");
let contexto = canvas.getContext("2d");
let imagen = $("#imagen");
canvas.width = imagen.width;
canvas.height = imagen.height;
contexto.drawImage(imagen,0,0);
SacarPixeles();
/* GET PIXELS IMAGE COLOR AND DRAW A IMAGE */
function SacarPixeles(){
let dataImagen = contexto.getImageData(0,0, canvas.width, canvas.height);
_("Tamaño imagen data: " + dataImagen.data.length);
let pixR =[], pixG =[], pixB =[], pixA =[];
let k = "";
for(var i =0, j =0; i < dataImagen.data.length; i +=4, ++j) {
k += "Colores pixel" +(j+1)+ ": Rojo=" +dataImagen.data[i]+" \nVerde=" +dataImagen.data[i+1]+" \nAzul=" +dataImagen.data[i+2]+" \nAlfa=" +dataImagen.data[i+3]+"\n\n\n";
pixR[j] = dataImagen.data[i].toString(16);
pixG[j] = dataImagen.data[1+i].toString(16);
pixB[j] = dataImagen.data[2+i].toString(16);
pixA[j] = dataImagen.data[3+i].toString(16);
}
performance = d.createDocumentFragment();
for(var i=0; i < pixR.length; ++i) {
var tdiv=dce("b");
var tbr=dce("br");
if(i % canvas.width == 0) {
performance.appendChild(tbr);
}
/*
░▒▓█
*/
tdiv.innerHTML = "▓";
tdiv.style.color = "#"+pixR[i]+""+pixG[i]+""+pixB[i]+""+pixA[i]+"";
performance.appendChild(tdiv);
}
_("Escribiendo...");
$("#output").appendChild(performance);
_("Imagen percorrida");
_(k);
k = "";
}
}
</script>
</body>
</html>
Autor
En línea
