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

Revisions

  1. jwill created this gist Nov 4, 2014.
    117 changes: 117 additions & 0 deletions MemeMaker-Solution.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,117 @@
    <!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>