html

copy image to data uri using chrome base64 encode

Posted in html
348
6:20 am, August 31, 2018

copy image to data uri using chrome base64 encode

Update: 26 Aug 2020 - Fixed video and original image link all should be working now in chrome.

Found this one useful if you want to convert an image to base64 encode and link it directly in css or html, rather than using a base64 encoder.

  1. find the image you want to convert
  2. lets use this emoji as an example. 
  3. open dev tools, f12 and inspect the image.
  4. right click the image and open in sources panel
  5. right click the image in sources panel and press copy image as datauri
  6. this will give you the image as a converted string, like this:
  8. then you can use it like this in an image tag:
  9. or you can even add it to css as a background image tag

as this one is a bit hard to follow, here is a video of how to do it.

View post on imgur.com

copy image to data uri using chrome base64 encode Demo

View Demo Full Screen View Demo New Tab

copy image to data uri using chrome base64 encode Code

HTML

<img src="data:image/gif;base64,R0lGODlhKgAWANU1AKul8/3y/YmN7ZaQ6fX+/4OF4u34+ABs/wLap3ZSo34svfyjqJBBzPZsgEgWbJKM5dDI6W4jpqVb3lkchpGQ6IU0wlAZeHonufJs97ue6dLR676X1uan3tK86wrl/5OO4tnn+v3F36SF0v3a3/vQ3nl83T7+/3yA4ZOH3dvp+/L//Pju7uv8+On39/P09Zd4xv/j/+G7/UEHbUtJr////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEOUMzNzgyNzREMkU2ODExQUIwOEE1NUNBNjI2NUE4RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRDMyMzY4QkFEMjMxMUUxOEFERkQxMEE4RkNDQTYxRCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRDMyMzY4QUFEMjMxMUUxOEFERkQxMEE4RkNDQTYxRCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJv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" />
Posted in html
348
6:20 am, August 31, 2018

Related Tags

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in html
using the kbd html tag twitter social sharing meta tags test image url that always changes unsplash placeholder set the amount of lines to show in a textarea field Scroll down indicator css javascript and html a page with two images Aligning Images in TinyMCE or Floating them left and right (code) test page for the custom css 12 grid used on this site easy twitter embed code Custom JS Tabs - No Jquery or Jquery UI scroll to top html css and js hide parts of a form until the 1st item is selected load a youtube video in a fancybox modal add google captcha to enable and disable a form button template for testing and live reloading html files toggle div function with chevron up down toggle Bootstrap Card Formatting HTML and CSS - Header and Footer Applied Accessibility - Tab Index Applied Accessibility - Access Keys Dropdown Box with Searchable Text meta keywords tag meta description tag favicon code meta tag foundation includes cdnjs Form elements New Zealand region list video embed no controls video embed tag video embed full screen all screen sizes del youtube embed iframe emoji data take full page screenshot screencapture using chrome dev tools flexbox layout template simple dropdown navigation ul li css responsive viewport meta tag youtube embed no controls auto play iframe make all links target new window lorem ipsum copy image to data uri using chrome base64 encode youtube extract thumbnail from video link using foundation 6.4 xy grid basics meta refresh reload page layout homepage random emojis copy and paste link to an external stylesheet form elements australian state list simple dropdown multi level navigation ul li css make any element editable
Related Search Terms
html tools 67
html html 13
html css 6
html bat 67
Other Categories in Code
testing apache apps asp bat bootstrap core css design elements fancybox fonts foundation framework gimp git html ideas images javascript jquery js linux nginx php php functions python react sections site bugs site documentation sql sublime svg templates tools webdev windows wordpress
php

php return json header and content

php functions

php get file extension from a file name

php functions

php post data back to a url with a function

bootstrap

add a divider to your dropdown nav toggles

php functions

generate random username function in php

Search Code
Search Code by entering your search text above.
API