Crear PNG directamente desde Javascript

Interesante librería que nos permite crear imágenes PNG directamente desde Javascript, para lo cual codifica la imagen usando el formato PNG y devuelve la cadena en base64. Algo parecido a la creación de documentos PDF.

var p = new PNGlib(200, 200, 256); // construcor takes height, weight and color-depth
var background = p.color(0, 0, 0, 0); // set the background transparent
for (var i = 0, num = 200 / 10; i <= num; i+=.01) {
  var x = i * 10;
  var y = Math.sin(i) * Math.sin(i) * 50 + 50;
  // use a color triad of Microsofts million dolar color
  p.buffer[p.index(Math.floor(x), Math.floor(y - 10))] = p.color(0x00, 0x44, 0xcc);
  p.buffer[p.index(Math.floor(x), Math.floor(y))] = p.color(0xcc, 0x00, 0x44);
  p.buffer[p.index(Math.floor(x), Math.floor(y + 10))] = p.color(0x00, 0xcc, 0x44);
}
for (var i = 0; i < 50; i++) {
  for (var j = 0; j < 50; j++) {
    p.buffer[p.index(i + 90, j + 135)] = p.color(0xcc, 0x00, 0x44);
    p.buffer[p.index(i + 80, j + 120)] = p.color(0x00, 0x44, 0xcc);
    p.buffer[p.index(i + 100, j + 130)] = p.color(0x00, 0xcc, 0x44);
  }
}
document.write('');

Sinceramente, no se me ocurre ninguna utilidad práctica a esta librería, porque puede ser sustituida facilmente por otras alternativas, pero lo que es indudable es que se trata de una gran librería.

Generate client-side PNG files using JavaScript

Vía / DZone

Similar Posts

4 Comments

  1. Eso es que no has visto los programas de dibujo con javascript y canvas que han salido últimamente.

    A parte, que 0% de ejecución en servidor = hosting que no te da la tabarra por que te estás pasando con los ciclos de CPU.

  2. Exacto, q, tú mismo lo has dicho: canvas. Y si quieres gráficas hay librerias buenísimas.

    Por eso mismo he dicho: “porque puede ser sustituida facilmente por otras alternativas”

    Saludos y gracias por el comentario 🙂

  3. A mí se me ocurre que puede servir para cambiar el icono del navegador de la web (favicon), y hacer un icono dinámico (para barra de progreso o %)

    //
    var icon=document.getElementById(“favicon”);
    (newIcon = icon.cloneNode(true)).setAttribute(“href”,”data:image/png;base64,”+p.getBase64());
    icon.parentNode.replaceChild(newIcon,icon);

Comments are closed.