Skip to content

Instantly share code, notes, and snippets.

@ericpatrick

ericpatrick/MemeMaker.html

Forked from jwill/MemeMaker.html
Created July 25, 2017 22:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ericpatrick/376f46ef072cca010d8e493d74d24ec7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ericpatrick/376f46ef072cca010d8e493d74d24ec7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ericpatrick revised this gist Jul 25, 2017. 1 changed file with 22 additions and 1 deletion.
    23 changes: 22 additions & 1 deletion MemeMaker.html
    View file
    Original file line number Diff line number Diff line change
    @@ -47,7 +47,27 @@
    // Get Canvas2DContext
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext("2d");
    // Your code here

    if (image !== null) {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    // Need to install mscorefonts on the ubuntu 14,04
    ctx.font = "36pt 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() {
    @@ -59,6 +79,7 @@
    var canvasWidth = 500;
    var canvasHeight = 500;
    var file = evt.target.files[0];
    console.log("=====", file);



  2. @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" />
  3. @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>