{"id":50925,"date":"2020-11-20T03:01:18","date_gmt":"2020-11-19T17:01:18","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=50925"},"modified":"2020-11-19T21:16:25","modified_gmt":"2020-11-19T11:16:25","slug":"emoji-image-creator-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-primer-tutorial\/","title":{"rendered":"Emoji Image Creator Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Image Creator Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.gif\" title=\"Emoji Image Creator Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve long <i>eyed up<\/i> the wish to have emojis (which you need to know are text <font size=1>(and this very fact is the reason for this whole project)<\/font>) be involved with a <a target=_blank title='Border image information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_border-image.asp'>border image<\/a> or <a target=_blank title='Background image information from W3schools' href='https:\/\/www.w3schools.com\/css\/css_background_image.asp'>background image<\/a> or just with some image in work developing web applications.  And so we joined forces with (and thanks to) &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a><\/li>\n<li><a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/28644340\/how-do-i-get-base64-encoded-image-from-clipboard-in-internet-explorer\/28799619'>Stack Overflow<\/a><\/li>\n<li><a target=_blank title='jQuery' href='https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js'>jQuery<\/a><\/li>\n<\/ul>\n<p> &#8230; along with &#8230;<\/p>\n<ul>\n<li>textbox reachable &#8220;Emoji and Symbols&#8221; menu to include Emoji characters (though we also accept Emoji <a target=_blank title='CodePoint information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Code_point'>CodePoint<\/a>(s) too)<\/li>\n<li>Copy and Paste technologies &#8230;\n<ol>\n<li>Copy (Image) from <a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a><\/li>\n<li>Paste to HTML div <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true via <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/28644340\/how-do-i-get-base64-encoded-image-from-clipboard-in-internet-explorer\/28799619'>Stack Overflow<\/a> and <a target=_blank title='jQuery' href='https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js'>jQuery<\/a><\/li>\n<\/ol>\n<\/li>\n<li>your own desktop Image Editors &#8230; for example &#8230;\n<ol>\n<li><a target=_blank title='Gimp' href='http:\/\/gimp.org'>Gimp<\/a> can Crop and Resize and Select to new Image via Copy then Paste<\/li>\n<li><a target=_blank title='PreView (on a Mac) information from Apple' href='https:\/\/support.apple.com\/en-us\/HT201740'>Preview<\/a> and <a target=_blank title='Paintbrush for Mac' href='http:\/\/paintbrush.sourceforge.net\/'>Paintbrush<\/a> (here on macOS) can Resize and Select to new Image via Copy then Paste<\/li>\n<\/ol>\n<p> &#8230; can help remove any extraneous whitespace coming off the <a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a> Copy image\n<\/li>\n<\/ul>\n<p>With all this help coming our way you&#8217;d think we might get away just using HTML and Javascript, but no, we need PHP, we figure, using a web browser file to toggle between web application executions that have no arguments as either &#8230;<\/p>\n<ul>\n<li>it means we display our inhouse interactive entry mode of use when that file does not exist &#8230; whereas &#8230;<\/li>\n<li><font size=1>we arrange it so that<\/font> it is a call from <a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a> when that file exists (as we morph inhouse content into a single <i>p<\/i> element containing the Emojis in such a scenario) as <a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a> takes its <strike>screen<\/strike><font size=1>webpage<\/font>shot<\/li>\n<\/ul>\n<p>So here is our PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php_GETME\" title=\"emoji_image.php\">emoji_image.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php\" title=\"Click picture\">live run<\/a> &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php\" style=\"width:100%;height:900px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d50925' onclick='var dv=document.getElementById(\"d50925\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/jquery\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50925' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve long eyed up the wish to have emojis (which you need to know are text (and this very fact is the reason for this whole project)) be involved with a border image or background image or just with some &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[126,127,161,2299,214,2022,2442,265,1654,385,491,513,529,576,590,3137,652,663,770,3488,896,907,932,983,997,3487,1319],"class_list":["post-50925","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-background","tag-background-image","tag-border","tag-border-image","tag-clipboard","tag-codepoint","tag-contenteditable","tag-copy","tag-data-uri","tag-emoji","tag-gimp","tag-google","tag-google-pagespeed","tag-html","tag-image","tag-image-editor","tag-javascript","tag-jquery","tag-menu","tag-pagespeed","tag-paintbrush","tag-paste","tag-php","tag-preview","tag-programming","tag-symbols","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50925"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=50925"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50925\/revisions"}],"predecessor-version":[{"id":50938,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50925\/revisions\/50938"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=50925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=50925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=50925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}