Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

Il metodoHTMLCanvasElement.toBlob() crea un oggetto Blob rappresentante l'immagine contenuta nel canvas;  questo file potrebbe essere immagazzinato per usi futuri su disco o in memoria a discrezione dell'user agent. Se type non è specificato, il tipo immagine è impostato aimage/png. L'immagine creata ha una risoluzione di 96dpi.
Il terzo argomento è usato con immagini di tipoimage/jpeg per specificare la qualità dell'output.

Sintassi

void canvas.toBlob(callback, mimeType, qualityArgument);

Parametri

callback
Funzione di callback con l'oggetto Blob risultante come singolo argomento.
mimeType Optional
Un oggetto DOMString indicante il tipo immagine. Quella di default èimage/png.
qualityArgument Optional
Un oggetto Number tra0 e1 indicante la qualità immagine se il tipo richiesto è image/jpeg oimage/webp. Se questo argomento è diverso dai due precedenti è utilizzato il valore di qualità immagine di default. Altri argomenti verranno ignorati.

Valore ritornato

Nessuno.

Esempi

Ottenere un file rappresentante il canvas

Una volta aver disegnato il contenuto in un canvas, è possibile convertirlo in un file di un qualsiasi. Lo snippet di codice in basso, ad esempio, prende l'immagine contenuta nell'elemento <canvas> avente ID "canvas", ottenendo una sua copia in formato immagine PNG, quindi aggiunge un nuovo elemento <img> al documento, la cui immagine di origine è quella creata utilizzando il canvas.

var canvas = document.getElementById('canvas');

canvas.toBlob(function(blob) {
  var newImg = document.createElement('img'),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

Si noti che si sta creando un'immagine PNG; se si specifica un secondo parametro nella chiamata a toBlob(),  si può specificare il formato immagine. Ad esempio, per ottenere l'immagine in formato JPEG:

 canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality

Convertire un canvas in icona (solo su Mozilla)

Ora si userà -moz-parse per convertire un canvas in icona. Windows XP non supporta la conversione dal formato PNG ad ICO, quindi usa quello bitmap (BMP) al suo posto. Un link di download è creato impostando l'attributo download. Il valore dello stesso è il nome che verrà utilizzato come nome del file.

var canvas = document.getElementById('canvas');
var d = canvas.width;
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

function blobCallback(iconName) {
  return function(b) {
    var a = document.createElement('a');
    a.textContent = 'Download';
    document.body.appendChild(a);
    a.style.display = 'block';
    a.download = iconName + '.ico';
    a.href = window.URL.createObjectURL(b);
  }
}
canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon', 
              '-moz-parse-options:format=bmp;bpp=32');

Salvare toBlob su disco con OS.File (valido solo per chrome/add-on)

This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.

var canvas = document.getElementById('canvas');
var d = canvas.width;
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

function blobCallback(iconName) {
  return function(b) {
    var r = new FileReader();
    r.onloadend = function () {
    // r.result contains the ArrayBuffer.
    Cu.import('resource://gre/modules/osfile.jsm');
    var writePath = OS.Path.join(OS.Constants.Path.desktopDir, 
                                 iconName + '.ico');
    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result), 
                                      {tmpPath:writePath + '.tmp'});
    promise.then(
      function() {
        console.log('successfully wrote file');
      },
      function() {
        console.log('failure writing file')
      }
    );
  };
  r.readAsArrayBuffer(b);
  }
}

canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
              '-moz-parse-options:format=bmp;bpp=32');

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'HTMLCanvasElement.toBlob' in that specification.
Living Standard No change since the latest snapshot, HTML5
HTML 5.1
The definition of 'HTMLCanvasElement.toBlob' in that specification.
Recommendation No change
HTML5
The definition of 'HTMLCanvasElement.toBlob' in that specification.
Recommendation Snapshot of the HTML Living Standard containing the initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 50 19 (19) 10ms (Yes) (Yes)[1]
Image quality parameter 50 25 (25) No support (Yes) No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 50 19.0 (19) ? No support ? 50
Image quality parameter No support 50 25.0 (25) ? No support ? 50

[1] See WebKit bug 71270.

Polyfill

A low performance polyfill based on toDataURL.

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {

    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i = 0; i < len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || 'image/png'} ) );
  }
 });
}

See also

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: ssava
 Ultima modifica di: ssava,