Zielony Smok

HTML5 canvas – tutorial

Zapisanie canvas jako blob (png)

Rysujemy obrazek na canvas.

Używamy toBlob() z jednym argumentem – funkcją zwrotną.

Funkcja przekształca canvas w obrazek PNG (w postaci obiektu binarnego blob).

blob/code> jest przypisywany do elementu 'obrazek' jako źródło.

Nazwa Blob to nazwa interfejsu używanego głównie w JDBC. Klasy implementujące tworzą Binary Large OBject.

Kliknij prawym klawiszem myszy aby zapamiętać.


Listing

function drawHeart(ctx, x, y, w, h) {
var x0 = x + 0.5 * w;
var y0 = y + 0.3 * h;
var x1 = x + 0.1 * w;
var y1 = y;
var x2 = x;
var y2 = y + 0.6 * h;
var x3 = x + 0.5 * w;
var y3 = y + 0.9 * h;
var x4 = x + w;
var y4 = y + 0.6 * h;
var x5 = x + 0.9 * w;
var y5 = y;
ctx.moveTo(x0, y0);
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3);
ctx.bezierCurveTo(x4, y4, x5, y5, x0, y0);
};
var cv = document.getElementById('canvas');
var ctx = cv.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 5;
ctx.fillStyle = "rgb(255,0,0)";
drawHeart(ctx, 20, 20, 200, 200);
ctx.fill();
cv.toBlob(function(blob) {
var obrazek = document.getElementById('obrazek');
var bloba = URL.createObjectURL(blob);
//URL.revokeObjectURL(bloba);
obrazek.src = bloba;
});