29
\$\begingroup\$

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 , so shortest code in bytes wins!

Happy Memeing!

\$\endgroup\$
  • 1
    \$\begingroup\$ Can we assume the Impact font is installed? \$\endgroup\$ – Downgoat Feb 7 '16 at 20:10
  • \$\begingroup\$ @Downgoat yeah. \$\endgroup\$ – Maltysen Feb 7 '16 at 21:50
  • 9
    \$\begingroup\$ ...advice animals? Is this what you call a dank meme? \$\endgroup\$ – nine Feb 8 '16 at 6:38
  • 5
    \$\begingroup\$ These memes aren't dank at all. This is like, entry-level memeology. \$\endgroup\$ – Pyritie Feb 8 '16 at 11:09
  • 2
    \$\begingroup\$ @Pyritie Not everyone should be allowed to wield meme magic just yet. \$\endgroup\$ – hownowbrowncow Feb 8 '16 at 14:26
13
\$\begingroup\$

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>

\$\endgroup\$
  • \$\begingroup\$ You can probably remove a lot of the quotes in the html. You can also remove the ></div> at the end \$\endgroup\$ – Downgoat Feb 7 '16 at 19:03
  • \$\begingroup\$ You can change your div's to p tags and add margin:0; should save a few bytes \$\endgroup\$ – andlrc Feb 7 '16 at 19:54
  • \$\begingroup\$ @dev-null After Downgoat's suggestion it now costs me a byte rather than saving me a byte. \$\endgroup\$ – Neil Feb 7 '16 at 19:58
  • \$\begingroup\$ @Neil This is correct, but if you also move the style tag to the end you will be able to remove the </style> \$\endgroup\$ – andlrc Feb 7 '16 at 19:58
  • \$\begingroup\$ @dev-null Well, I can get rid of the first </p> at least (the second is needed to prevent you from pressing Ctrl+A, Del to delete the style element). \$\endgroup\$ – Neil Feb 7 '16 at 20:11
12
\$\begingroup\$

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:

enter image description here

\$\endgroup\$
  • 2
    \$\begingroup\$ Nice answer, but I'm not counting this as an image. Its not really graphical output. \$\endgroup\$ – Maltysen Feb 7 '16 at 21:37
  • \$\begingroup\$ Upgoated, nice golf. \$\endgroup\$ – Ave Feb 7 '16 at 22:07
  • \$\begingroup\$ Guess @Downgoat needs a sibling named Upgoat now. \$\endgroup\$ – Paul Picard Feb 8 '16 at 10:40
5
\$\begingroup\$

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

Superman likes Beavis

\$\endgroup\$
  • 4
    \$\begingroup\$ That's not impact font! \$\endgroup\$ – Pyritie Feb 8 '16 at 11:10
  • \$\begingroup\$ True. It appears I don't have it installed. fc-list can't find it. \$\endgroup\$ – luser droog Feb 10 '16 at 2:29
  • \$\begingroup\$ I could specify Impact anyway, but then it'd render with Courier. \$\endgroup\$ – luser droog Mar 7 '16 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.