dataURL na stronie jako źródło obrazka

Postępowanie:

  • Tworzymy pusty obrazek
  • Elementowi canvas nadajemy styl: display: none
  • Na canvas rysujemy obrazek
  • canvas zapisujemy jako dataURL
  • pustemu elementowi img przypisujemy dataURL jako źródło tego obrazka
  • Obrazek pojawi się w elemencie img. Można
    go kliknąć prawym klawiszem myszy i zapisać jak każdy inny obrazek. Oczywiście
    można by również kliknąć canvas.


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();
	  var dataURL = cv.toDataURL();
	  document.getElementById('obrazek').src = dataURL;		
	

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *