Skip to content

Instantly share code, notes, and snippets.

@zhangtreefish

zhangtreefish/MemeMaker.html

Forked from jwill/MemeMaker.html
Last active August 29, 2015 14:17
Download ZIP

Revisions

  1. @jwill jwill revised this gist Nov 23, 2014. 1 changed file with 0 additions and 4 deletions.
    4 changes: 0 additions & 4 deletions MemeMaker.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,10 +15,6 @@
    </head>

    <body>
    <script>


    </script>

    <div>
    <input type="file" id="file" />
  2. @jwill jwill created this gist Nov 4, 2014.
    99 changes: 99 additions & 0 deletions MemeMaker.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,99 @@
    <!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");
    // Your code here
    }

    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>