MohcinBN/text_to_downlable_image.html

## text_to_downlable_image.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text To Downloadable Image</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <style>
      .maincontentcontainer {
        display: table;
        width: 100%;
        margin: 21px 0 0 0;
      }
      .to_be_saved {
        white-space: pre-line;
        border: 2px solid;
        text-align: center;
        vertical-align: middle;
        width: 1080px;
        height: 300px;
        display: table-cell;
        background: rgb(2, 0, 36);
        background: linear-gradient(
          90deg,
          rgba(2, 0, 36, 1) 0%,
          rgba(0, 182, 230, 1) 35%,
          rgba(0, 212, 255, 1) 100%
        );
      }
      .maincontentcontainer span {
        width: 344px;
        display: inline-block;

        color: #fff;
      }
      button {
        position: absolute;
        right: -14%;
        top: 60%;
      }
    </style>
  </head>
  <body class="mt-4">
    <div id="app">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">
            <textarea
              id="summernote"
              class="form-control"
              v-model="text_fo_image"
              placeholder="add your text that you want to convert it to a downloadable image"
            ></textarea>
            <div class="maincontentcontainer" style="">
              <p ref="to_be_saved" class="to_be_saved" style="">
                <span style="">{{ text_fo_image }}</span>
              </p>
            </div>
            <button
              style=""
              @click.preventDefault="ExportImage()"
              class="btn btn-outline-success"
            >
              Export Your Image!
            </button>
          </div>
        </div>
      </div>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          text_fo_image: "",
        },
        methods: {
          async ExportImage() {
            //alert("clicked");
            let element_to_export = this.$refs.to_be_saved;

            // create canvas
            const ExportCanvas = await html2canvas(element_to_export);

            const link = document.createElement("a");
            link.setAttribute("download", "your-image.png");
            link.setAttribute(
              "href",
              ExportCanvas.toDataURL("image/png").replace(
                "image/png",
                "image/octet-stream"
              )
            );
            link.click();
          },
        },
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Text To Downloadable Image</title>
	<link
	rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	crossorigin="anonymous"
	/>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="js/html2canvas.min.js"></script>
	<style>
	.maincontentcontainer {
	display: table;
	width: 100%;
	margin: 21px 0 0 0;
	}
	.to_be_saved {
	white-space: pre-line;
	border: 2px solid;
	text-align: center;
	vertical-align: middle;
	width: 1080px;
	height: 300px;
	display: table-cell;
	background: rgb(2, 0, 36);
	background: linear-gradient(
	90deg,
	rgba(2, 0, 36, 1) 0%,
	rgba(0, 182, 230, 1) 35%,
	rgba(0, 212, 255, 1) 100%
	);
	}
	.maincontentcontainer span {
	width: 344px;
	display: inline-block;

	color: #fff;
	}
	button {
	position: absolute;
	right: -14%;
	top: 60%;
	}
	</style>
	</head>
	<body class="mt-4">
	<div id="app">
	<div class="container">
	<div class="row">
	<div class="col-md-12 text-center">
	<textarea
	id="summernote"
	class="form-control"
	v-model="text_fo_image"
	placeholder="add your text that you want to convert it to a downloadable image"
	></textarea>
	<div class="maincontentcontainer" style="">
	<p ref="to_be_saved" class="to_be_saved" style="">
	<span style="">{{ text_fo_image }}</span>
	</p>
	</div>
	<button
	style=""
	@click.preventDefault="ExportImage()"
	class="btn btn-outline-success"
	>
	Export Your Image!
	</button>
	</div>
	</div>
	</div>
	</div>

	<script>
	var app = new Vue({
	el: "#app",
	data: {
	text_fo_image: "",
	},
	methods: {
	async ExportImage() {
	//alert("clicked");
	let element_to_export = this.$refs.to_be_saved;

	// create canvas
	const ExportCanvas = await html2canvas(element_to_export);

	const link = document.createElement("a");
	link.setAttribute("download", "your-image.png");
	link.setAttribute(
	"href",
	ExportCanvas.toDataURL("image/png").replace(
	"image/png",
	"image/octet-stream"
	)
	);
	link.click();
	},
	},
	});
	</script>
	</body>
	</html>