Zapamiętanie HTML5 canvas jako BLOB (jpg)

Zapamiętanie canvas jako blob (jpg)

Może nie działać w niektórych przeglądarkach.

Rysujemy obrazek na canvas.

Używamy toBlob() z trzema argumentami – funkcją zwrotną, trybem obrazka i dokładnością obrazka.

Funkcja przekształca canvas w obrazek JPEG (w postaci obiektu binarnego blob) z pełną dokładnością.

blob jest przypisywany do elementu ‘obrazek’ jako źródło.

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.fillStyle="white";
  ctx.fillRect(0,0,cv.width,cv.height);
  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);
	  obrazek.src= bloba;
	  //URL.revokeObjectURL(bloba);
  }, "image/jpeg", 1.0);