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

3 Answers 3

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\$
10
  • \$\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, 2016 at 19:03
  • \$\begingroup\$ You can change your div's to p tags and add margin:0; should save a few bytes \$\endgroup\$ Feb 7, 2016 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, 2016 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\$ Feb 7, 2016 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, 2016 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\$
3
  • 2
    \$\begingroup\$ Nice answer, but I'm not counting this as an image. Its not really graphical output. \$\endgroup\$
    – Maltysen
    Feb 7, 2016 at 21:37
  • \$\begingroup\$ Upgoated, nice golf. \$\endgroup\$
    – ave
    Feb 7, 2016 at 22:07
  • \$\begingroup\$ Guess @Downgoat needs a sibling named Upgoat now. \$\endgroup\$
    – Sake
    Feb 8, 2016 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\$
3
  • 4
    \$\begingroup\$ That's not impact font! \$\endgroup\$
    – Pyritie
    Feb 8, 2016 at 11:10
  • \$\begingroup\$ True. It appears I don't have it installed. fc-list can't find it. \$\endgroup\$ Feb 10, 2016 at 2:29
  • \$\begingroup\$ I could specify Impact anyway, but then it'd render with Courier. \$\endgroup\$ Mar 7, 2016 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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