Jviejo/create png.html

## create png.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      // hacer la image
      function demoImagen(canvas) {
        const ctx = canvas.getContext("2d");

        // Draw the background
        ctx.rect(0, 0, 250, 100);
        ctx.fillStyle = "green";
        ctx.fill();

        // Draw the text
        ctx.font = "15px Helvetica";
        ctx.fillStyle = "ghostwhite";
        ctx.fillText("CURSO:XXXXX", 10, 30);
        ctx.fillText("LECCION: YYYYY ", 10, 60);
        ctx.fillText("FECHA: 21/3/2024 ", 10, 90);
      }
      // Convert a data URI to a Blob
      function dataURItoBlob(dataURI) {
        var binary = atob(dataURI.split(",")[1]);
        var array = [];
        for (var i = 0; i < binary.length; i++) {
          array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], { type: "image/jpeg" });
      }

      //
      function f1() {
        const canvas = document.getElementById("myCanvas");
        demoImagen(canvas);

        const imgElement = document.createElement("img");
        imgElement.src = canvas.toDataURL("image/jpeg");

        console.log(imgElement.src);
        const blob = dataURItoBlob(imgElement.src);
        console.log(blob)
        document.getElementById("container").appendChild(imgElement);
      }
    </script>
  </head>
  <body>
    <button onclick="f1()">pincha</button>
    <div id="container"></div>
    <canvas id="myCanvas" width="250" height="100"></canvas>
  </body>
</html>

## createpng.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      // hacer la image
      function demoImagen(canvas) {
        const ctx = canvas.getContext("2d");

        // Draw the background
        ctx.rect(0, 0, 250, 100);
        ctx.fillStyle = "green";
        ctx.fill();

        // Draw the text
        ctx.font = "15px Helvetica";
        ctx.fillStyle = "ghostwhite";
        ctx.fillText("CURSO:XXXXX", 10, 30);
        ctx.fillText("LECCION: YYYYY ", 10, 60);
        ctx.fillText("FECHA: 21/3/2024 ", 10, 90);
      }
      // Convert a data URI to a Blob
      function dataURItoBlob(dataURI) {
        var binary = atob(dataURI.split(",")[1]);
        var array = [];
        for (var i = 0; i < binary.length; i++) {
          array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], { type: "image/jpeg" });
      }

      //
      function f1() {
        const canvas = document.getElementById("myCanvas");
        demoImagen(canvas);

        const imgElement = document.createElement("img");
        imgElement.src = canvas.toDataURL("image/jpeg");

        console.log(imgElement.src);
        const blob = dataURItoBlob(imgElement.src);
        console.log(blob)
        document.getElementById("container").appendChild(imgElement);
      }
    </script>
  </head>
  <body>
    <button onclick="f1()">pincha</button>
    <div id="container"></div>
    <canvas id="myCanvas" width="250" height="100"></canvas>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script>
	// hacer la image
	function demoImagen(canvas) {
	const ctx = canvas.getContext("2d");

	// Draw the background
	ctx.rect(0, 0, 250, 100);
	ctx.fillStyle = "green";
	ctx.fill();

	// Draw the text
	ctx.font = "15px Helvetica";
	ctx.fillStyle = "ghostwhite";
	ctx.fillText("CURSO:XXXXX", 10, 30);
	ctx.fillText("LECCION: YYYYY ", 10, 60);
	ctx.fillText("FECHA: 21/3/2024 ", 10, 90);
	}
	// Convert a data URI to a Blob
	function dataURItoBlob(dataURI) {
	var binary = atob(dataURI.split(",")[1]);
	var array = [];
	for (var i = 0; i < binary.length; i++) {
	array.push(binary.charCodeAt(i));
	}
	return new Blob([new Uint8Array(array)], { type: "image/jpeg" });
	}

	//
	function f1() {
	const canvas = document.getElementById("myCanvas");
	demoImagen(canvas);

	const imgElement = document.createElement("img");
	imgElement.src = canvas.toDataURL("image/jpeg");

	console.log(imgElement.src);
	const blob = dataURItoBlob(imgElement.src);
	console.log(blob)
	document.getElementById("container").appendChild(imgElement);
	}
	</script>
	</head>
	<body>
	<button onclick="f1()">pincha</button>
	<div id="container"></div>
	<canvas id="myCanvas" width="250" height="100"></canvas>
	</body>
	</html>