Last active
March 18, 2019 02:48
-
-
Save JamesIves/d9c52c5a59878831ecbf to your computer and use it in GitHub Desktop.
Creates internet memes using HTML5 Canvas. Save it as a HTML file and open in a compatible browser such as Chrome.
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>James' Meme Generator</title> | |
<meta | |
name="viewport" | |
content="width=device-width, initial-scale=1.0, maximum-scale=1.0" | |
/> | |
<meta name="mobile-web-app-capable" content="yes" /> | |
<meta name="apple-mobile-web-app-capable" content="yes" /> | |
<style> | |
#image-container { | |
display: flex; | |
} | |
.text-style { | |
font-family: Verdana; | |
font-weight: bold; | |
font-size: 15px; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<input type="file" id="file" /> | |
</div> | |
<div id="image-container"> | |
<canvas width="500" height="500"></canvas> | |
<div> | |
<span class="text-style">Top Line:</span><br /> | |
<input id="topLineText" type="text" /><br /> | |
<span class="text-style">Bottom Line:</span><br /> | |
<input id="bottomLineText" type="text" /><br /> | |
<button id="saveBtn">Save</button> | |
</div> | |
</div> | |
<script> | |
function textChangeListener(evt) { | |
var id = evt.target.id; | |
var text = evt.target.value; | |
if (id == "topLineText") { | |
window.topLineText = text; | |
} else { | |
window.bottomLineText = text; | |
} | |
redrawMeme(window.imageSrc, window.topLineText, window.bottomLineText); | |
} | |
function redrawMeme(image, topLine, bottomLine) { | |
var canvas = document.querySelector("canvas"); | |
var ctx = canvas.getContext("2d"); | |
if (image != null) | |
ctx.drawImage(image, 0, 0, canvas.width, canvas.height); | |
ctx.font = "30pt Impact"; | |
ctx.textAlign = "center"; | |
ctx.strokeStyle = "black"; | |
ctx.lineWidth = 3; | |
ctx.fillStyle = "white"; | |
if (topLine != null) { | |
ctx.fillText(topLine, canvas.width / 2, 40); | |
ctx.strokeText(topLine, canvas.width / 2, 40); | |
} | |
if (bottomLine != null) { | |
ctx.fillText(bottomLine, canvas.width / 2, canvas.height - 20); | |
ctx.strokeText(bottomLine, canvas.width / 2, canvas.height - 20); | |
} | |
} | |
function saveFile() { | |
window.open(document.querySelector("canvas").toDataURL()); | |
} | |
function handleFileSelect(evt) { | |
var canvasWidth = 500; | |
var canvasHeight = 500; | |
var file = evt.target.files[0]; | |
var reader = new FileReader(); | |
reader.onload = function(fileObject) { | |
var data = fileObject.target.result; | |
var image = new Image(); | |
image.onload = function() { | |
window.imageSrc = this; | |
redrawMeme(window.imageSrc, null, null); | |
}; | |
image.src = data; | |
console.log(fileObject.target.result); | |
}; | |
reader.readAsDataURL(file); | |
} | |
window.topLineText = ""; | |
window.bottomLineText = ""; | |
var input1 = document.getElementById("topLineText"); | |
var input2 = document.getElementById("bottomLineText"); | |
input1.oninput = textChangeListener; | |
input2.oninput = textChangeListener; | |
document | |
.getElementById("file") | |
.addEventListener("change", handleFileSelect, false); | |
document | |
.querySelector("button") | |
.addEventListener("click", saveFile, false); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment