DIR : /home/kozerus/public_html/go/konva4.html

/home/kozerus/public_html/go

<!DOCTYPE html>
<html>
  <head>
	<script id=script_konva_js src="/go/js/konva_min.js" ></script>
<!--
	<script id=script_jspdf_js src="/go/js/jspdf_153_debug.js"
		integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
		crossorigin="anonymous"
		></script>
	-->

<!--    <script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script> -->
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
		crossorigin="anonymous"
		>
		</script>

	<meta charset="utf-8" />
	<title>Konva PDF Demo</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: #FAF0E6; // linen
			background-color: #DAA520; // goldenrod
			background-color: #DEB887; // burlywood
			background-color: #f0f0f0; // white
			background-color: #000000; // black
			}
		#save {
			position: absolute;
			top: 5px;
			left: 5px;
			}
		</style>
	</head>

<body>
	<img src="/go/pages/tn/tn_1.png" height=50>
<!--	<img src=/go/pages/zn/zn_1.jpg height=500> -->
	<div id="container"></div>
	<button id="save">Save as PDF</button>
	<script>
		var width = window.innerWidth;
		var height = window.innerHeight;

	var stage = new Konva.Stage({
		container: 'container',
		width: width,
		height: height,
		});

      var layer = new Konva.Layer();
      stage.add(layer);

      var back = new Konva.Rect({
        width: stage.width(),
        height: stage.height(),
        fill: 'rgba(200, 200, 200)',
      });
      layer.add(back);

      var text = new Konva.Text({
        text: 'This is the Darth Vader',
        x: 15,
        y: 40,
        rotation: -10,
        filters: [Konva.Filters.Blur],
        blurRadius: 4,
        fontSize: 18,
      });
      text.cache();
      layer.add(text);

      var arrow = new Konva.Arrow({
        points: [70, 50, 100, 80, 150, 100, 190, 100],
        tension: 0.5,
        stroke: 'black',
        fill: 'black',
      });
      layer.add(arrow);

      // alternative API:
      Konva.Image.fromURL(
        'https://konvajs.org//assets/darth-vader.jpg',
        function (darthNode) {
          darthNode.setAttrs({
            x: 200,
            y: 50,
            scaleX: 0.5,
            scaleY: 0.5,
          });
          layer.add(darthNode);
        }
      );

      document.getElementById('save').addEventListener('click', function () {
        var pdf = new jsPDF('l', 'px', [stage.width(), stage.height()]);
        pdf.setTextColor('#000000');
        // first add texts
        stage.find('Text').forEach((text) => {
          const size = text.fontSize() / 0.75; // convert pixels to points
          pdf.setFontSize(size);
          pdf.text(text.text(), text.x(), text.y(), {
            baseline: 'top',
            angle: -text.getAbsoluteRotation(),
          });
        });

        // then put image on top of texts (so texts are not visible)
		pdf.addImage(
			stage.toDataURL({ pixelRatio: 2 }),
			0,
			0,
			stage.width(),
			stage.height()
			);

//		pdf.save('canvas.pdf');
		var pdffil="kogo.pdf";
		pdf.save(pdffil);
		});
		</script>
	</body>
	</html>
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer