embed referred images in HTML files

grep -ioE "(url\(|src=)['\"]?[^)'\"]*" a.html | grep -ioE "[^\"'(]*.(jpg|png|gif)" | while read l ; do sed -i "s>$l>data:image/${l/[^.]*./};base64,`openssl enc -base64 -in $l| tr -d '\n'`>" a.html ; done;

in "a.html", find all images referred as relative URI in an HTML file by "src" attribute of "img" element, replace them with "data:" URI. This useful to create single HTML file holding all images in it, as a replacement of the IE-created .mht file format. The generated HTML works fine on every other browser except IE, as well as many HTML editors like kompozer, while the .mht format only works for IE, but not for every other browser. Compare to the KDE's own single-file-web-page format "war" format, which only opens correctly on KDE, the HTML file with "data:" URI is more universally supported. The above command have many bugs. My commandline-fu is too limited to fix them: 1. it assume all URLs are relative URIs, thus works in this case: <img src="images/logo.png"/> but does not work in this case: <img src="http://www.my_web_site.com/images/logo.png" /> This may not be a bug, as full URIs perhaps should be ignored in many use cases. 2. it only work for images whoes file name suffix is one of .jpg, .gif, .png, albeit images with .jpeg suffix and those without extension names at all are legal to HTML. 3. image file name is not allowed to contain "(" even though frequently used, as in "(copy of) my car.jpg". Besides, neither single nor double quotes are allowed. 4. There is infact a big flaw in this, file names are actually used as regular expression to be replaced with base64 encoded content. This cause the script to fail in many other cases. Example: 'D:\images\logo.png', where backward slash have different meaning in regular expression. I don't know how to fix this. I don't know any command that can do full text (no regular expression) replacement the way basic editors like gedit does. 5. The original a.html are not preserved, so a user should make a copy first in case things go wrong.

By: zhangweiwu

2010-05-05 14:07:51

grep read sed html

Submit An Alternative

What Others Think

A braver soul could also try an mht2html converter script, for those non-IE user who received .mht file from other places and could not use them. I am not sure if it can be done in one line. I would be glad to write a script to do it and publish the script as a piece of software, if proven not possible to do it with commandline-fu.

zhangweiwu · 748 weeks and 3 days ago

Brilliant. When turning it into a script, first ``cd `dirname $1```.

cayhorstmann · 470 weeks and 1 day ago

Classificação dos melhores casinos online de 2021. Os 20 melhores sites de casinos em Portugal com levantamentos rápidos, muitas slot machines e os melhores bónus

jorgens · 144 weeks and 4 days ago

https://seofox.ir/seo/ https://seofox.ir/gray-hat-seo/ https://seofox.ir/search-engine/ https://seofox.ir/page-rank/ https://seofox.ir/backlink-definition/ https://seofox.ir/seo-techniques/ https://seofox.ir/technical-seo/ https://seofox.ir/on-page-seo/ https://seofox.ir/seo-tools/ https://seofox.ir/off-page-seo/ https://seofox.ir/seo-consultation/ https://seofox.ir/on-page-seo/ https://seofox.ir/google-seo-book/ https://seofox.ir/add-site-in-google/ https://seofox.ir/category/seo/ https://seofox.ir/seo-training/ https://seofox.ir/order/ https://seofox.ir/page-speed/ https://seofox.ir/seo-company https://seofox.ir/white-hat-seo/ https://seofox.ir/seo-principles/ https://seofox.ir/category/seo-content/ https://seofox.ir/seo-checklist/ https://seofox.ir/category/seo-content/ https://seofox.ir/google-algorithms/ https://seofox.ir/google-penalty-removal/ https://seofox.ir/rules-of-link-building/ https://seofox.ir/analyze-seo/ https://seofox.ir/backlink/ https://seofox.ir/seo-services-prices/ ??? ? ????? ????

seofox · 135 weeks and 3 days ago

seofox · 134 weeks and 4 days ago

rahimhh21 · 105 weeks and 3 days ago

Perfecthomepugs · 96 weeks and 5 days ago

pugpuppies95 · 58 weeks and 6 days ago

I work with images and videos and recommend https://depositphotos.com/stock-videos.html This site is my true source of inspiration and creativity. Each visit opens up new ideas that inspire me to create something unique and exciting

HenryWatson · 42 weeks and 1 day ago

Looking for comprehensive Avent manuals and instructions? ManyManuals is here to help. Our extensive collection of guides covers a wide range of Avent products, providing valuable insights and step-by-step instructions. Whether you're a new parent or a seasoned caregiver, https://avent.manymanuals.com/ has the resources you need to ensure the well-being of your baby.

manymanuals1x · 35 weeks ago

https://avent.manymanuals.com/ 148. Looking for comprehensive Avent manuals and instructions? ManyManuals is here to help. Our extensive collection of guides covers a wide range of Avent products, providing valuable insights and step-by-step instructions. Whether you're a new parent or a seasoned caregiver, https://avent.manymanuals.com/ has the resources you need to ensure the well-being of your baby.

manymanuals1x · 35 weeks ago

yeneba6574 · 13 weeks and 5 days ago

What do you think?

Any thoughts on this command? Does it work on your machine? Can you do the same thing with only 14 characters?

You must be signed in to comment.

What's this?

commandlinefu.com is the place to record those command-line gems that you return to again and again. That way others can gain from your CLI wisdom and you from theirs too. All commands can be commented on, discussed and voted up or down.

Share Your Commands

Similar Commands

Convert HTML to epub

Autorotate a directory of JPEG images from a digital camera

Rename HTML files according to their title tag

Create thumbnails and a HTML page for listing them (with links to sources)

Stay in the loop…

Follow the Tweets.

Every new command is wrapped in a tweet and posted to Twitter. Following the stream is a great way of staying abreast of the latest commands. For the more discerning, there are Twitter accounts for commands that get a minimum of 3 and 10 votes - that way only the great commands get tweeted.

» http://twitter.com/commandlinefu
» http://twitter.com/commandlinefu3
» http://twitter.com/commandlinefu10

Subscribe to the feeds.

Use your favourite RSS aggregator to stay in touch with the latest commands. There are feeds mirroring the 3 Twitter streams as well as for virtually every other subset (users, tags, functions,…):

Subscribe to the feed for:

» all commands
» commands with 3 up-votes (commandlinefu3)
» commands with 10 up-votes (commandlinefu10)