1

I have tricky questions, I receive email with some HTML code in it which generates some CSS objects. Objects might have different sizes. I want to transform these objects to png image.

I cannot use canvas2html, because it doesn't support all CSS. Currently I am opening email, making a printscreen and saving it manually but this is not the way to go. I wonder if you have any idea how to automate it.

Currently I busy with scripting it in the way:

  1. Receive email
  2. Save css object as html file
  3. Open file in browser
  4. Make print screen of entire screen using powershell
  5. Save it to file
  6. Using Photoshop actions crop the file

I believe that should work (although I still have some gaps in it like how to automate saving CSS to html file), but I am pretty sure that there must be better way to do that.

Sample code:

<html> 
 <head> 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 </head> 
 <body> 
 <i id="icon" class="fa fa-linkedin-square" style="text-shadow: rgb(48, 117, 165) 0px 0px 0px, rgb(48, 118, 167) 1px 1px 0px, rgb(49, 120, 169) 2px 2px 0px, rgb(49, 121, 171) 3px 3px 0px, rgb(50, 123, 173) 4px 4px 0px, rgb(51, 124, 175) 5px 5px 0px, rgb(51, 125, 177) 6px 6px 0px, rgb(52, 127, 179) 7px 7px 0px, rgb(52, 128, 181) 8px 8px 0px, rgb(53, 130, 183) 9px 9px 0px, rgb(53, 131, 185) 10px 10px 0px, rgb(54, 133, 187) 11px 11px 0px, rgb(55, 134, 189) 12px 12px 0px, rgb(55, 136, 191) 13px 13px 0px, rgb(56, 137, 193) 14px 14px 0px, rgb(56, 138, 195) 15px 15px 0px, rgb(57, 140, 197) 16px 16px 0px, rgb(58, 141, 199) 17px 17px 0px, rgb(58, 143, 201) 18px 18px 0px, rgb(59, 144, 203) 19px 19px 0px, rgb(59, 146, 205) 20px 20px 0px, rgb(60, 147, 207) 21px 21px 0px, rgb(60, 148, 209) 22px 22px 0px, rgb(61, 150, 211) 23px 23px 0px, rgb(62, 151, 213) 24px 24px 0px, rgb(62, 153, 215) 25px 25px 0px, rgb(63, 154, 217) 26px 26px 0px, rgb(63, 156, 219) 27px 27px 0px, rgb(64, 157, 221) 28px 28px 0px, rgb(65, 158, 223) 29px 29px 0px, rgb(65, 160, 225) 30px 30px 0px, rgb(66, 161, 227) 31px 31px 0px, rgb(66, 163, 229) 32px 32px 0px, rgb(67, 164, 231) 33px 33px 0px, rgb(67, 166, 233) 34px 34px 0px; font-size: 151px; color: rgb(255, 255, 255); height: 236px; width: 236px; line-height: 236px; border-radius: 41%; text-align: center; background-color: rgb(68, 167, 235);"></i> 
 </body></html>
sodawillow
  • 12,497
  • 4
  • 34
  • 44
Dawid Adach
  • 749
  • 5
  • 27
  • Does the image render correctly in the email ? Would it be an acceptable solution to automate a screenshot of the email ? – sodawillow Dec 05 '15 at 11:49
  • 1
    Apparently a very similar question has been asked before. Found it on first hit of a google search. [Here](http://stackoverflow.com/questions/762162/how-can-i-programmatically-create-a-screen-shot-of-a-given-web-site). And [this SO](http://stackoverflow.com/questions/531684/what-is-the-best-way-to-take-screenshots-of-a-window-with-c-in-windows) covers programmatically taking a screenshot. To do it from PS, you'd need to create some P/Invoke function definitions (plenty of info available on doing that). Please be sure to search for relevant answers before posting to SO. – Χpẘ Dec 06 '15 at 03:35
  • @sodawillow , yes this is acceptable – Dawid Adach Dec 06 '15 at 11:02

1 Answers1

0

Quite the project you have. The Photoshop cropping could be automated by using the library provided by this blog:

http://blogs.msdn.com/b/powershell/archive/2009/03/31/image-manipulation-in-powershell.aspx

I would give it a good read and have a look at the crop script. You would need to work out where in your print screen you wanted to crop from. You could then crop the size of the image by taking the height and width from your markup.

Hopefully that gives you a starting point.

Chris
  • 304
  • 7
  • 21