Dank Meme Generator

Question

I like making dank memes out of my own images. But all those so called "quick meme" sites just have too much code. I realized that the only way to make the dankest meme generator is to ask you guys at PPCG to golf one for me. So let me give you the low down on what you have to do.

Specs

• Take an image as input as a file name, image object, etc. to make a meme out of.
• Then take two strings for top text and bottom text (with no line breaks).
• Render the text on the image in size 22pt Impact white font with 5px black outline (You can assume Impact is installed.
• The text should be centered horizontally.
• You can assume the text fits horizontally.
• The respective texts should be 10px from the top and 8px from the bottom.
• Then output the image by saving in a file, displaying, etc.
• This is code-golf, so shortest code in bytes wins!

Happy Memeing!

Answer 1

HTML/JS/CSS, 341 329 300 bytes

<input onblur=i.src=this.value><table><td><img id=i><p style=top:10px contenteditable><p style=bottom:8px contenteditable></p><style>td{position:relative}p{position:absolute;margin:0;width:100%;text-align:center;font:22px Impact;color:#fff;text-shadow:0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000}

To use: First paste the desired image URL into the provided input box, then tab to the top text and type in the desired text, then tab to the bottom text and type in the desired text.

Edit: Saved 12 bytes thanks to @Downgoat. Saved a further 29 bytes thanks to @dev-null.

td {
  position: relative;
}
div {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font: 22px "Impact";
  color: #fff;
  text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
}

<input onchange="i.src=this.value">
<table>
  <td>
    <img id=i>
    <div style="top: 10px;" contenteditable></div>
    <div style="bottom: 8px;" contenteditable></div>

Answer 2

Jelly, 141 bytes

⁴;@€“¢ÇẎȧsẊỊ>ɼẈAẋ®ŀȮĠq⁼ṫṁḢĠZỴċƊ£²ÆṗÑḊ°>oÆl{(¢ɗpḅ]µṖÑb¹ƁịṾ¦Ç\ṭO4»“1kịXḥɗ"Ụɦḷ©Ƈ&Ṭ19“£ŀ³³.Ṗ<ṂqṬỵ.ṣȦƇƈ2ƭḂXƊ»ż³;“ßƑ_!]²Rȧ⁵⁴°ṁD⁽a{⁼!z¿ıṾƇDẇḤḶṡÇẈg»;

Try it online!

Takes command line arguments as in the example, and returns a HTML file. The result looks like this in Chrome:

Answer 3

bash+imagemagick+gs 690 575 456 440 bytes

See earlier revisions for "ungolfed" code.

#!/bin/bash
d=`identify $1|cut -d' ' -f3`
x=`echo $d|cut -d'x' -f1`
y=`echo $d|cut -d'x' -f2`
convert $1 $1.eps
gs -g"$d" -o $1.png -sDEVICE=png48 -c "
/s/showpage load def/showpage{}def($1.eps)run
matrix defaultmatrix setmatrix/Helvetica-Bold 22
selectfont/c{dup stringwidth pop neg 2 div 0 rmoveto dup 
gsave 1 setgray show grestore 0 setgray false charpath stroke}def
$x 2 div $y 42 sub moveto($2)c $x 2 div 8 moveto($3)c s"
echo :$1.png

eg.

./meme.sh Superman1.jpg "I AM CORNHOLIO" "Are you threatening me??!"
GPL Ghostscript 9.15 (2014-09-22)
Copyright (C) 2014 Artifex Software, Inc.  All rights reserved.
This software comes with NO WARRANTY: see the file PUBLIC for details.
Loading NimbusRomNo9L-Regu font from /usr/share/ghostscript/9.15/Resource/Font/NimbusRomNo9L-Regu... 4186304 2700982 3995248 2685490 2 done.
Loading NimbusSanL-Bold font from /usr/share/ghostscript/9.15/Resource/Font/NimbusSanL-Bold... 4203248 2760390 3833712 2536130 1 done.
:Superman1.jpg.png