Sentido Web » canvas

PDF.js librería Javascript para leer PDF en Canvas

displaynone — Wed, 15 Jun 2011 16:48:49 +0000

Interesante librería Javascript que nos permite mostrar en Canvas (HTML5) el contenido de un PDF. Puede venir muy bien para aplicaciones móviles, ya que en navegación en escritorio normalmente la gente tiene instalado un visor de PDFs.



  </span></a></span>Simple pdf.js page viewer<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">
   type="text/javascript"
          src="pdf.js">
   type"text/css">
body {
  margin: 6px;
  padding: 0px;
  background-color: #c0bdb7;
}
#controls {
  border-bottom: 1px solid black;
  position:fixed;
  left: 0px; top: 0px;
  width: 100%;
  padding: 7px;
  background-color: rgb(242, 240, 238);
}
span#info {
  float: right;
  font: 14px sans-serif;
  margin-right: 10px;
}
#viewer {
  margin: auto;
  border: 1px solid black;
  width: 8.5in;
  height: 11in;
}
#pageNumber {
  text-align: right;
}
  
 
 type="text/javascript">
function queryParams() {
    var qs = window.location.search.substring(1);
    var kvs = qs.split("&");
    var params = { };
    for (var i = 0; i < kvs.length; ++i) {
        var kv = kvs[i].split("=");
        params[unescape(kv[0])] = unescape(kv[1]);
    }
    return params;
}
 
var canvas, numPages, pageDisplay, pageNum;
function load() {
    canvas = document.getElementById("canvas");
    canvas.mozOpaque = true;
    pageDisplay = document.getElementById("pageNumber");
    infoDisplay = document.getElementById("info");
    pageNum = parseInt(queryParams().page) || 1;
    fileName = queryParams().file || "compressed.tracemonkey-pldi-09.pdf";
    open(fileName);
}
 
function open(url) {
    document.title = url;
    req = new XMLHttpRequest();
    req.open("GET", url);
    req.mozResponseType = req.responseType = "arraybuffer";
    req.expected = (document.URL.indexOf("file:") == 0) ? 0 : 200;
    req.onreadystatechange = xhrstate;
    req.send(null);
}
 
function xhrstate() {
    if (req.readyState == 4 && req.status == req.expected) {
        var data = req.mozResponseArrayBuffer ||
                   req.mozResponse ||
                   req.responseArrayBuffer ||
                   req.response;
        pdf = new PDFDoc(new Stream(data));
        numPages = pdf.numPages;
        document.getElementById("numPages").innerHTML = numPages.toString();
        gotoPage(pageNum);
    }
}
 
function displayPage(num) {
    pageDisplay.value = num;
 
    var t0 = Date.now();
 
    var page = pdf.getPage(pageNum = num);
 
    var t1 = Date.now();
 
    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
 
    var gfx = new CanvasGraphics(ctx);
 
    // page.compile will collect all fonts for us, once we have loaded them
    // we can trigger the actual page rendering with page.display
    var fonts = [];
    page.compile(gfx, fonts);
 
    var t2 = Date.now();
 
    // This should be called when font loading is complete
    page.display(gfx);
 
    var t3 = Date.now();
 
    infoDisplay.innerHTML = "Time to load/compile/render: "+ (t1 - t0) + "/" + (t2 - t1) + "/" + (t3 - t2) + " ms";
}
 
function nextPage() {
    if (pageNum < numPages)
        ++pageNum;
    displayPage(pageNum);
}
 
function prevPage() {
    if (pageNum > 1)
        --pageNum;
    displayPage(pageNum);
}
function gotoPage(num) {
    if (0 <= num && num <= numPages)
        pageNum = num;
    displayPage(pageNum);
}
  

 
 onload="load();">
   id="controls">
     onclick="prevPage();">Previous
     onclick="nextPage();">Next
     type="text" id="pageNumber" onchange="gotoPage(this.value);"
           value="1" size="4">
    /  id="numPages">--
     id="info">
  
   id="viewer">
    
    ="canvas" width="816" height="1056"></canvas>

PDF.js

Vía / @badass_js

Heatmap en tiempo real con Javascript y Canvas

displaynone — Tue, 09 Nov 2010 19:52:01 +0000

Los heatmaps son muy útiles para ver qué zonas de nuestras webs atraen la atención de los usuarios. Esta función de Javascript permite mostrar en tiempo real el heatmap que se va produciendo gracias a Javascript y el elemento HTML de Canvas.

Real-time heatmap example with Javascript and HTMLCanvas

Post originalVía / WebAppers

Close Pixelate: pixela imágenes con HTML5

displaynone — Wed, 20 Oct 2010 17:25:18 +0000

Close Pixelate es un script que convierte una imagen en su correspondiente pixelada haciendo uso de HTML5 y canvas. Se le pueden indicar las siguientes opciones: resolución, forma del pixelado, tamaño, desplazamiento y canal alpha

Su uso es tan sencillo como ejecutar lo siguiente:

var docReady = function() {
  document.getElementById('portrait-image').closePixelate([
    { resolution : 24 },
    { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
  ]);
};
window.addEventListener( 'DOMContentLoaded', docReady, false);

Close Pixelate

Vía / WebAppers

Manipular vídeos con HTML5 y canvas

displaynone — Wed, 20 Oct 2010 16:16:24 +0000

Increíbles ejemplos de cómo manipular vídeos en directo aplicando filtros gracias a HTML5 y canvas. Los ejemplos nos muestra cómo se reproduce un vídeo y se muestra el mismo vídeo con efecto de escala de grises o detección de contornos. Realmente increíble.

Post original

Modernizr: librería Javascript para detectar HTML5, CSS3 y más

displaynone — Tue, 17 Aug 2010 08:27:19 +0000

Modernizr es una librería que permite detectar las nuevas características de HTML5, CSS3, Canvas, … que admite el navegador. Tan sólo habrá que acceder a propiedades para saber si admite o no una característica en particular:

if (Modernizr.geolocation) {
  // Admite geolocalizaciÃ³n
}
if (Modernizr.csstransitions) {
  // Transacciones CSS
}
if (Modernizr.rgba) {
  // RGBA
}

Las características que detecta son:

@font-face
Canvas
Canvas Text
HTML5 Audio
HTML5 Audio formats
HTML5 Video
HTML5 Video formats
rgba()
hsla()
border-image
border-radius
box-shadow
Multiple backgrounds
opacity
CSS Animations
CSS Columns
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
Geolocation API
Input Types
Input Attributes
localStorage
sessionStorage
Web Workers
applicationCache
SVG
SVG Clip paths
SMIL
Web SQL Database
IndexedDB
Web Sockets
hashchange Event
History Management
Drag and Drop
Cross-window Messaging

Modernizr

jsMSX: emulador de MSX con Javascript y Canvas

displaynone — Thu, 25 Jun 2009 16:30:00 +0000

MSX es un ordenador de hace la tira de años que cuando eramos pequeños nos parecía increíble y que ahora nos parece paleolítico. jsMSX es un emulador realizado en Javascript y Canvas que permite ejecutar juegos para ese sistema. En sí la aplicación no tiene mucha utilidad, pero es interesante desde el punto de vista de lo que se está consiguiendo mediante Javascript y Canvas. jsMSX Via / @lardissone

Efecto de escala de grises para navegadores no IE

displaynone — Wed, 13 May 2009 20:30:00 +0000

Interesante script que realiza el efecto de escala de grises en cualquier imagen o elementos HTML. Funciona para navegadores que permiten canvas, IE ya tiene un filtro que lo realiza.

Su uso es muy sencillo, tan sólo importar la librería y ejecutar el siguiente código:

grayscale( document.getElementsByTagName('div') );

“Grayscaling” in non-IE browser

Vía / Script & Style

Crear gráficas accesibles con jQuery y canvas

displaynone — Thu, 26 Mar 2009 20:30:00 +0000

Buen plugin para jQuery que permite crear gráficas de datos accesibles mediante canvas. El script es bastante fácil de usar, se crea una tabla (sí, si, con , que es para lo que se deben usar), y el script dibuja los datos en un canvas. Ofrece la posibilidad de crear gráficas de pie, barras y líneas, para lo cual, en el class de la etiqueta canvas hay que especificar el origen y el tipo de gráfica (por ejemplo, fgCharting_src-dataTable_type-pie). Creating accessible charts using canvas and jQuery Vía / couch

Detección de caras con Javascript y Canvas

displaynone — Mon, 16 Mar 2009 18:00:00 +0000
Interesante script que usa canvas para detectar rostros en las fotografías. Se basa en openCV y en el post de John Resig para evitar un captcha. Permite la opción de reconocer una cara o varias caras, este último lo he probado con una foto y no me ha funcionado, pero como bien dice el autor, aún tiene que mejorar más el script. Interesante opción para servicios como Facebook o Flickr para sus opciones de asociar elementos (usuarios, comentarios, …) a las fotografías. También es útil para avisar de que no se ha subido una cara cuando alguien cambia de avatar. Face detection in javascript + canvas Vía / @rafabayona

typeface.js: hacer render de texto y fuentes con javascript

displaynone — Fri, 13 Mar 2009 02:30:00 +0000

typeface.js es una librería que nos permite crear texto usando fuentes mediante javascript (canvas, SVG o VML para IE). El uso es muy sencillo:

<div class="myclass typeface-js" style="font-family: Helvetiker"> Text here in Helvetiker font... </div>

Además ofrece una utlidad en Perl que permite convertir truetypes a trucefaces.

typeface.js

Vía / WebAppers