Skip to content

Instantly share code, notes, and snippets.

@MohcinBN
Created April 7, 2021 12:26
Show Gist options
  • Save MohcinBN/9875b58130cac0880ac7914e723141f3 to your computer and use it in GitHub Desktop.
Save MohcinBN/9875b58130cac0880ac7914e723141f3 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment