Zielony Smok - logo witryny

Zapamiętywanie obrazów

Postępowanie:

  • Na canvas rysujemy obrazek
  • Zapisujemy canvas przy użyciu funkcji toDataURL()

Bity obrazka są zamieniane na ciąg znaków zawierający 64 znaki (kodowanie Base64).

  • Ciąg znaków oglądamy przekazując go do elementu <p>

heartData:data:image/png;base64,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

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 //+ 0 * h;
		var x2 = x //+ 0 * w;
		var y2 = y + 0.6 * h;
		var x3 = x + 0.5 * w;
		var y3 = y + 0.9 * h;
		var x4 = x + 1 * w;
		var y4 = y + 0.6 * h;
		var x5 = x + 0.9 * w;
		var y5 = y //+ 0 * h;
		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();
	  var dataURL = cv.toDataURL();
	  var doc = document.getElementById("heartData");
	  doc.innerHTML="heartData:" + dataURL;