Skip to content

Instantly share code, notes, and snippets.

@jwill

jwill/MemeMaker-Solution.html

Created November 4, 2014 01:00
Show Gist options
  • Save jwill/d017253e2bb1d3c91c84 to your computer and use it in GitHub Desktop.
Save jwill/d017253e2bb1d3c91c84 to your computer and use it in GitHub Desktop.
Download ZIP
Simple MemeMaker Solution Code
Raw
MemeMaker-Solution.html
<!DOCTYPE html>
<html>
<head>
<title>MemeMaker-Simple</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;
}
</style>
</head>
<body>
<script>
</script>
<div>
<input type="file" id="file" />
</div>
<div id="image-container">
<canvas width="500" height="500"></canvas>
<div>
<span>Top Line:</span><br/>
<input id="topLineText" type="text"><br/>
<span>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) {
// Get Canvas2DContext
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
if (image != null)
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// Text attributes
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;
// Create an image object
var image = new Image();
image.onload = function() {
window.imageSrc = this;
redrawMeme(window.imageSrc, null, null);
}
// Set image data to background image.
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>
@ahmedch1
Copy link

ahmedch1 commented Sep 5, 2018

Thanks very much but the save button doesn't work.I am using Google chrome by the way.

@MarieAshley
Copy link

For anyone having trouble getting this going on Chrome, try replacing saveFile() with:

    function saveFile() {
      var win = window.open();
      win.document.write('<iframe src="' + document.querySelector('canvas').toDataURL()  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
    }

@shajal-kumer
Copy link

Who are facing issue on save button use this code..

function saveFile() {
	const src = document.querySelector("canvas").toDataURL();
	var newTab = window.open();
	newTab.document.body.innerHTML = `<img src="${src}" />`;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment