A Pen by Ashley Hebler on CodePen.
Created
August 28, 2019 12:41
-
-
Save lesterdefreitas/467065acfca3b443e52b24232c0c63e5 to your computer and use it in GitHub Desktop.
Add dynamic text to canvas image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Overlay text on canvas image and save as base64</h1> | |
<div class="page-wrap"> | |
<div class="controls"> | |
<input class="controls__input" type="file" id="imageLoader" name="imageLoader"/> | |
<label class="controls__label" for="name">First, choose an image.</label> | |
<input class="controls__input" id="name" type="text" value=""/> | |
<label class="controls__label" for="name">Overlay Text</label> | |
</div> | |
<div id="canvas-wrap"> | |
<canvas style="display:block" id="imageCanvas" width=400px height=400px> | |
<canvas id="canvasID"></canvas> | |
</canvas> | |
</div> | |
</div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var text_title ="Overlay text"; | |
var imageLoader = document.getElementById('imageLoader'); | |
imageLoader.addEventListener('change', handleImage, false); | |
var canvas = document.getElementById('imageCanvas'); | |
var ctx = canvas.getContext('2d'); | |
var img = new Image(); | |
img.crossOrigin="anonymous"; | |
window.addEventListener('load', DrawPlaceholder) | |
function DrawPlaceholder() { | |
img.onload = function() { | |
DrawOverlay(img); | |
DrawText(); | |
DynamicText(img) | |
}; | |
img.src = 'https://unsplash.it/400/400/?random'; | |
} | |
function DrawOverlay(img) { | |
ctx.drawImage(img,0,0); | |
ctx.fillStyle = 'rgba(30, 144, 255, 0.4)'; | |
ctx.fillRect(0, 0, canvas.width, canvas.height); | |
} | |
function DrawText() { | |
ctx.fillStyle = "white"; | |
ctx.textBaseline = 'middle'; | |
ctx.font = "50px 'Montserrat'"; | |
ctx.fillText(text_title, 50, 50); | |
} | |
function DynamicText(img) { | |
document.getElementById('name').addEventListener('keyup', function() { | |
ctx.clearRect(0, 0, canvas.width, canvas.height); | |
DrawOverlay(img); | |
DrawText(); | |
text_title = this.value; | |
ctx.fillText(text_title, 50, 50); | |
}); | |
} | |
function handleImage(e) { | |
var reader = new FileReader(); | |
var img = ""; | |
var src = ""; | |
reader.onload = function(event) { | |
img = new Image(); | |
img.onload = function() { | |
canvas.width = img.width; | |
canvas.height = img.height; | |
ctx.drawImage(img,0,0); | |
} | |
img.src = event.target.result; | |
src = event.target.result; | |
canvas.classList.add("show"); | |
DrawOverlay(img); | |
DrawText(); | |
DynamicText(img); | |
} | |
reader.readAsDataURL(e.target.files[0]); | |
} | |
function convertToImage() { | |
window.open(canvas.toDataURL('png')); | |
} | |
document.getElementById('download').onclick = function download() { | |
convertToImage(); | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background: #222; | |
color: #fff; | |
position: relative; | |
text-align: center; | |
font-size: 1rem; | |
font-family: sans-serif; | |
padding-bottom: 3em; | |
} | |
.page-wrap { | |
display: inline-block; | |
margin: 2em auto; | |
} | |
.controls { | |
&__input { | |
display: block; | |
margin: 0 auto; | |
background: none; | |
border: none; | |
font-size: 1em; | |
padding-bottom: .5em; | |
border-bottom: 2px solid #ccc; | |
text-align: center; | |
outline: none; | |
color: #fff; | |
} | |
&__btn { | |
background: dodgerblue; | |
color: #fff; | |
border: none; | |
font-size: 1em; | |
} | |
&__label { | |
display: block; | |
font-size: .8em; | |
padding-top: .3em; | |
margin-bottom: 2em; | |
} | |
} | |
canvas { | |
background-color: #eee; | |
// opacity: 0; | |
transition: opacity .3s; | |
&.show { | |
opacity: 1; | |
} | |
} | |
.canvas-wrap { | |
margin-top: 50px; | |
position: relative; | |
} | |
#canvasID { | |
z-index: 9999; | |
} |
Dynamictext event handler needs to be keydown not keyup.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When I add text in field it does not show the first letter until i add next letter. Also same things happened when text removes.