If you look closely, you can tell this has been photoshopped; because of the pixels.
Smart phones are fast becoming the predominant tool for media consumption in the restroom. However, finding or getting the right story to your smartphone can sometimes be a pain. I’ve created one possible solution. I started with the premise that everyone in the world loves QR codes with a passion. I’m pretty sure the following link to a web comic clearly illustrates my point?
http://bradcolbow.com/archive/view/the_brads_qr_codes/
What I ended up with was a dynamic, branded QR code creator that uses the google chart API, php and GD; and can be inserted into the story tools widget of a news site or blog.
The setup is pretty easy, your server will need to have php and the GD library installed. A php file will accept four query arguments that will determine what your image will look like. When called with the arguments, the php file will return image data so you can directly include it in an image tag inside a “story tools” widget, if you like.
QR Code arguments:
- URL – ‘url’ This field should be the URL that the phone will browse to once scanned, presumably the page that you’re on. If you’re in wordpress, you can use the function get_permalink(); which will return the full URL for the page that you’re on.
- Text – ‘text’ This is an optional field and will place text below the QR Code. If you use this feature, you’ll need the file ARIAL.TTF in the same directory as the php file.
- Logo image – ‘overlay’ This field is also optional and will overlay a logo on top of your QR code. It can be either a fully qualified URL or a relative path to an image, but it must be a png. The height and width of this image must be small enough to not cover more than 30% of the QR code. If the code won’t scan, make your image smaller.
- Hash code – ‘hash’ This field can be used to append a ‘tracking code’ to your url using a hash tag. The hash tag will be automatically entered for you. If you use google analytics, follow this tutorial to enable hash tag tracking.
Example:
|
1 |
<img src="http://falldeaf.com/extra/fall_qr.php?overlay=falldeaf_qrcode_overlay.png&text=Scan%20this%20code%20to%20read%20on%20your%20mobile%20device&url=<?=get_permalink();?>" /> |
I hope this helps someone, enjoy! Alternatively, if I’ve inadvertently created a new, annoying, web fad that bugs the hell out of people, please accept my sincere apology! :)
Here’s the code for the php file, save it to a file called dynamic_qr_png.php for best results, or flibbertygibbit.php if you prefer to be obtuse.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
$url = $_REQUEST['url']; // URL for code to $text = $_REQUEST['text']; // message to display below barcode $overlay = $_REQUEST['overlay']; $hash_track = $_REQUEST['hash']; //Add the Hash symbol to the beginning of the hash code if(isset($hash_track)) $hash_track = "#" . $hash_track; //google chart API URL $image = "http://chart.apis.google.com/chart?cht=qr&chs=190x190&chl=" . $url . $hash_track . "&chld=h"; $font = 'ARIAL.TTF'; //Get the QR code image from google $background = imagecreatefrompng($image); $swidth = imagesx($background); $sheight = imagesy($background); //if a logo is defined, overlay it on top of the QR code //Important: overlay image needs to be a png if(isset($overlay)) { $overlay = imagecreatefrompng($overlay); //get image imagealphablending($background, true); //needed if logo has transparent layer $owidth = imagesx($overlay); //get the heigh and width of the overlay image $oheight = imagesy($overlay); imagecopy($background, $overlay, ($swidth/2) - ($owidth/2), ($sheight/2) - ($oheight/2), 0, 0, $owidth, $oheight); //paste it on top } //If text field isn't blank, draw it in below the code if(isset($text)) { $font_color = imagecolorallocate($background, 0, 0, 0); // set font color if(strlen($text) >= 15) { //split string in two, down the middle $half = (int) ( (strlen($text) / 2) ); // cast to int incase str length is odd $left = trim(substr($text, 0, $half)); $right = trim(substr($text, $half)); // Write Text imagettftext($background, 9, 0, 35, 176, $font_color, $font, $left); imagettftext($background, 9, 0, 35, 186, $font_color, $font, $right); } else { // Write Text imagettftext($background, 9, 0, 35, 172, $font_color, $font, $text); } } // Output header and final image header("Content-type: image/png"); header("Content-Disposition: filename=" . $image); imagepng($background); // Destroy the images imagedestroy($background); imagedestroy($overlay); |
References
- HackaDay tutorial for creating logo’d QR codes : http://hackaday.com/2011/08/11/how-to-put-your-logo-in-a-qr-code/
- Google Chart API : http://code.google.com/apis/chart/
- Campaign Tracking using _setAllowAnchor tags : http://www.lunametrics.com/blog/2009/02/04/setallowanchor/
- Making a watermark in GD : http://www.codingforums.com/showthread.php?t=72317
π
12 Comments
Thanks, but I can use this how? I dont see an example on your site. I’m not versed in php at all…so I have no clue what to do with the code and dont see it used on this page either > <
Step 1: Save the code section into a file called dynamic_qr_png.php on your webserver.
Step 2: Put an html image tag on your webpage that looks like < img src=”[LOCATION OF PHP FILE HERE]?overlay=[LOCATION OF OVERLAY IMAGE HERE]&text=[CAPTION TEXT HERE]&url= [URL TO POINT IT TO HERE] ” />
Step 3: It’s a fast paced world, these days. Don’t forget to take some time out of your day for you. Take a nice bubble bath and get a massage; pamper yourself.
Here is a QR Code generator, which works directly in your browser (JavaScript):
http://qrlogo.kaarposoft.dk
It allows you to embed a picture, and it will verify the quality of the QR code afterwards!
Hey that’s a nice find! Thanks for posting :)
I am a big fan and user of QR codes. Glad to see another story about them. I like the leaf idea. Will there be a snowflake one for winter?
Here’s my article about QR codes being used in jewelry – http://www.theweddingringblog.com/qr-codes/.
Holy shit. I’ve never seen a site with more ads than yours, sir!
Regarding your question, it’s an API of sorts that will allow you to put any image you choose.
Hey – thanks.
I am getting this error:
Warning: imagecreatefrompng() [function.imagecreatefrompng]: ‘http://upload.wikimedia.org/wikipedia/commons/1/15/Jpegvergroessert.jpg’ is not a valid PNG file in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 19
Warning: imagesx() expects parameter 1 to be resource, boolean given in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 21
Warning: imagesy() expects parameter 1 to be resource, boolean given in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 22
Warning: imagecopy() expects parameter 2 to be resource, boolean given in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 23
Warning: Cannot modify header information – headers already sent by (output started at /home/jbekcom/public_html/testing/qrkodegenerator.php:19) in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 44
Warning: Cannot modify header information – headers already sent by (output started at /home/jbekcom/public_html/testing/qrkodegenerator.php:19) in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 45
‰PNG IHDRôôD´HÝNIDATxœíÝk”Tåèá¹4ÍADä& °ˆ¶xƒ £DsŒ™%#£.Ž1„q:#1Æd £Æ¨“!.“™ƒ Çx¼4x‰C‘ƒÄ¥€-6…ØçC-öÔô¥ºª««»êÏó,>U»v½û® »««_ÚÕÖÖ–Kû¶ -OÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä q¨C[ ùÚµk×ÖC(UµµµÙo\¸y.Ü0rÚsNŠd6râ•Òl…{RZ3w€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä ^ò7’%½tg6Šd)Úœ†Q¸1Él”¢ðxè,€ìÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qèPYò7’E²(h‘,¾ZŠËçæ4æðÃ( ¯”bæÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qÈ’¿4¡×S-ÅU|ïL+sæ¸$î‰;@@â¸$î‰;@@â¸$î‰;@@â¸dÉ_šÓR´9)ÜŠ¸…F‘ŒšäÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qÈ’¿ ÈiY×ð 7E²Š/Ífž‹™3w€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä CeÉßÂ.^NSW¸5
sÚsáÆ\${.œ"ùsæ¸$î‰;@@â¸$î‰;@@â¸$î‰;@@â¸Ô®pk´C‘,ù[ŠÃȉW"-Ë™;@@â¸$î‰;@@â¸$î‰;@@â¸$î‰;@@âP‡¶ *’ÕesÚ¸HÆLºÂ–lÏÅÌ™;@@â¸$î‰;@@â¸$î‰;@@â¸$î‰;@@âP»Ò]ÓÒê²ÍVŠë©îé.¥øUWŠOJ)Îsó8sHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜ*á%s~mÒ"Y¹ç9¼R|‹dÌ%Ggî‰;@@â¸$î‰;@@â¸$î‰;@@â¸$î‰;@@ ÚzŨpËnѹ×S-Å1—¢R\˜·HÖ4nÎÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€•%‹dQР~=Õ"YZ¹É"·ž”VæÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä q¨„—ü-’En‹D)Ž¹p,r›®Hm. ËA7È™;@@â¸$î‰;@@â¸$î‰;@@â¸$î‰;@@âP /ù›“ÂóY¸åFKqñÕR\OµpOJ‘<ƒ9‘|‰–â ¶Ø8sHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜ:T–ü-œÂ-‘ZÒËf£g#üR´E²Š¯•´óçÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qÈ’¿ (Ür£¥¸RkNÂÏF‘¬.[$Ow)*’µ£[3w€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä v‡Î˜4O)®.[Š_Õ…[hºp 7æRœbãÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä q¨„—ü-Å¥h‹D‘ÿ¶Û^\±âsçŽ=öØ?¾òJëØ»÷’‹.ºuþüÿóå/§®¹ò²Ëf]|ñ ¿ÿ}Û¬„|üÑGçsÎÓO=•~åöšší55=zôh«QÁ¡À{îz§ºzïž=_Ÿ«ßÅ÷ßΙgŽ 4(õ ¼©§öøÃ=ï¿ßä®ö}øჿøÅeÿ÷ÆŽ >@ï.]útí:|À€SO›ëØêûø£îùÉOþæ쳇 uTeçÎCŽ<òôSOýñ¿ýÛ¾?Ì~'ÍžçÄË'Ïr¿ž=OûÑæó•|ÍUW%w?~ĈÍo½•ë ¬ö Š²²ÔŸÙ3g®_·îä1c’kêü™3kÖ‡ |PÛˆí553¦Ooì¾ee§rÊk¯¾ÚØÝÓ‡ÑØ6ÙÜwçŽ _˜:µÁ í×ï—?ža?wÞ~ûÑ}ûf8„Š²²É'ŸüÖ›oæ:Âij˗ <¸Á= 9rÍêÕ³gÎL®ipyÎsmmí«64ö,÷ìÔé{×__Ûܧ#óÔÕ9¢äÊg—/ÿ튽ÊËël¼aýú¤-›7g9í®¸O ?þ¨ÊÊä¯GUV Ó¿×öíÓ¿‚gLŸÞàîÞØ´éØaÃÒ·<}ãd›' }tÔ!u&9}ãü:ÿ™Ï~´Í‹û×]—Ü:fÔ¨··nÍ~Ú!]qOýéU^þÏ×^›œ5ìܱãÆë®Ka<¹ti}½¿{÷è‘#“»ûê«7¾öZrëúuëæÌš•ö¨ÊÊM7Ö P‹Ä½g§N© ÿûŒ3Ö]›ºõ7ß¼üÒKÓ·I?%LyàÞ{“ N7îÉ¥K?Ú·/¹uËæÍÿzË-éM¼õ¦›r ä«6$§{Ý;tøÖ¼yÉ øµW_½ä¢‹ê<õ“ÿ×A~ñ¬³’,ºï¾ú|ïúë3'&ÿy¾böìdçÿtÍ5õïþƦMuNK[!î©?ÓÎ9gÝÚµ=pËæÍwÞ~{r€ù uþ3Ÿýh3 {ƒ7¥¿¸N=úÝmÛ›1ÈFÃqÿÑ w4¸õþ?N¾‡ _U•~Ó;ÕÕÉë걇 Îðé§'õ_¥-÷ñUUû?þ¸ÁͦsN²Yúû³«WJ®Ïü¦üä“O®8x†˜Ó7mܘ7eJcw_ùâ‹éodµNÜëÿs›’ÿQç?óٶΖÙÄýGwÜ‘\yʸqÛkj2ì²ÑÀ§eºvëö¥™3üék‡Ž Ç Ÿº¼eóæô›?ðÀþ?.++2lØç¿ð… ?Â5{öa?·øšñCàl|ó;ßiìcéW^}ur9ùʲ²²¡Ã†-~üñ[æÏ¿lîÜ3¦NÍ°óaǧ.|pðsÜYJ¸Ù—_ÞØfsçÍkì¦üçù‘%KR{(++»úÚk»ûg&L˜zÖYö_ßüÎw¼>ÿ£Îæ³ m®~úã _ypHãÆbùòÞ‡ Þ”{æPÖ@ÜGÓ©sçÆîpd¿~© {öìI¿þ×ÏuaùSO ?bDæGM~+}ÓÆY4’Ç áߧ²²²ªÑ£S½Èf!°[¶¼ùƯoÜøÇ Ö¬^½zÕª½ÿaK½&³÷Ç ’dجýa‡ WUµjåÊú7å?Ïî¡É¥»’ïÒZDZUUÝ”ÿQç?óÙ6{Ï=óÌ=wß|½½uëÇ¿©‚øþ{†âÞ¾}s–ŠÜ׬î/ÌyJ“ßY'ÿ€Õ?Qºç'?ùöÕWo¯©iðŽ=++'O™²eóæÕ«V5cÉ,•——gÞ²{#Ëç?ÏÉÏ š C·ìÞ h)Î*ò?êüg¾Žæ5hüI’uìÔé·+V”••=´hÑ’ ü›iÓZjç ²ZlÉßdñé]´·¶6û?-5€tM~o›¼¯Rç%zÝ·¾5{æ̤ì‡uèplUÕÏ;ïªk®¹{áÂÕë×oݹóÞÅ‹3kŸAR–&ÛXÎòŸçä› C «´¡ü:ÿ™/ ’>±|ù¿ß}wçƒ#œ;gÎŽíÛ[s „Ôbqï{ð{üÆÎy[S“c¨>øMzú7×Ï?ûì7Ý”\÷Â…Õ»výþå—>øàu7Þxþ…~ê¸ãR·æú!™Dò-ƒo¥{o×®¯Ïž“wc’w*Óä [MþGÿ̸ñã ]¶¬[÷îÇŒ‘|réÝmÛ¾6gN«¨Z,î#GJ]X»fM“W¿ýöýû[ê¡ëK~fؘõëÖ¥.¤Ÿƒß1~êB—ŠŠ_=ÿüù^Xѵkƒw¯ó1Ðì}êØcSÖ]›åëÈžO3&óC$þ³©A¶šü:ÿ™/„ÑcÆ$_csçÍK¾Ýwߣ=Ôjà ¤‹ûÄI“RÞݶmůaËÝï½7zäÈÊòò‘ƒè?~{ëÖW^~¹±[Ÿ{úéä‡r“§LI®O>#qúgdXã÷ƒ½{ÓóÉ_ÿšýÀþçÁ‡{o×® ³ôÊË/’?B¬#ÿy>uòäd /¾ðB†=<öðÃnmMù uþ3_h :v¼ó®»Ú ü‰×³gïÚ¹³MFB -÷ôÏD_Ÿñ—;n¹é¦½{öÔ~òÉ–Í›‡ÖR¨cþm·5vÓm7ßœºÐ¹¼ñį üm¦wª«¯lü— iÉïªfù‹æD½èoÿ6¹éòK/mðî=üpúêN;w쨳AK-?PQVÖàºß¿á†dƒ¯_~yúMcFª8¸´Ncë¬þð¶Ûê,ùÞ®]9 2}ÕÉïßpCý .XPç@êlÿùä_-[–,ðòæo|óë_O_Wògwß]ÿ-÷®íÛÏ»âŠ$Ó_{-}å¿‘ƒ×yñ×YGûWË–ýõÀÔM{÷ìYtß}É2Âé}ÏuU÷í55#Lî~ñ$«nÙ¼yÞWÔùÇ£óüÞ®]ÇôïŸl0cúôdÌöí[tß}õ³mó¸çÔùÏ|ö£Í¼eæÉ”·‰÷víªµ^å壆 I_ﻢ¬ì³“&=²dIòו/¾˜ë8×®YSguøA}ú¤¯8?jÈóÏ=· ó¼fõê×sOÖçª(+û_’&—¯˜=;×ìmѸ·ÈQç?ó÷ÚÚÚ‹/¸ Ù&Ã2gA‹½çžrÂر/®YsfÚ‚S íÛ·ùÍ7Ó?Ö«wïÿX°àúï}¯e :]yyù²gž=fLYYYí’Ÿ¼S]þºÿ1iÒ «V  uîÕ£gϥ˗§~æ£}ûÞ|ãѱgeåwo¾yÙ3ÏLž2%ùÁ× Ï=—ëðN;ö…U«ÆŸtRrÍöššwª«S¿†>rÔ¨G—-Ëü‹”ùÏóØOúÉçžK?Ø÷víÚ²ysêºTTÌ¿óÎHû@^²ìDÊÿ¨óŸùÖqëüùÉ0.XðÔ/ٶ㡵ü[From the code:
The overlay image you’re specifying is a jpeg. You need to either make it a png or modify my code, which would be super easy.
I know nothing about code and would like to have a software that I could send a picture to a folder where it would automatically take that picture and attach a QR code. Then it would save it to another folder which would allow it to be viewed on a monitor in a grid formation that could be configured for business branding and layout so people could walk up use their QR reader and post to social media sites. Is this possible?
It’s definitely possible, but you’d need to do some coding to get it done (As far as I know, there could certainly be some software out there that already does this). Python could accomplish this pretty easily. Urllib2 and the google chart API could make the QR Codes, the imagemagick library to manipulate the images, and Tk to make the GUI interface.
I would like to use this but its not working for me. GD is installed and I followed the instructions as outlined above. I can’t get an image generated, and I dont see the “text” defined either. It returns noting. This is running on wamp environment with internet access.
7 Trackbacks
[…] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]
[…] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]
[…] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]
[…] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]
[…] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]
[…] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]
[…] Smart Phones now are the need of everyone. They are fast, accurate and easy to use. But sometimes it is hard to a find a right review or information for smartphones that fulfills one’s need. This article shows an easy way to get the QR codes for your smartphone. […]