CODEWITHSUNDEEP
htmlimageemailsignature
CJ7
CJ7

Reputation: 23275

How to convert image to html?

Is there a way to convert an image to an html equivalent of the image, by having an html table divided up into many cells each having a certain background colour which would act like pixels in an image? Much like ASCII art.

I would see this as a way to have a corporate logo in an email signature without having to worry about email clients blocking images.

Upvotes: 7

Views: 59987

Answers (7)

Empire of E
Empire of E

Reputation: 638

Finally Finished A Function in PHP, CSS & HTML
Ultimately this method should be considered Jpeg & Png to Div Conversion.

The method for achieving this involves making a grid of html elements that have RGB background colours set for each value.

Hope it helps anyone that comes here, i First came here and only found Base64 Conversion, nothing like Raw HTML & CSS.

    <?php

// Convert Images to RAW HTML for Bypassing Email Protection, Project by Woke World 2021
// image2div($imagePath, $type, $scale);


echo image2div("test.png","png", 5);


// Custom Function by Woke World @ GitHub
function image2div($imagePath, $type, $scale)
{
if ($type == "png")
{
$resource = imagecreatefrompng('test.png');
}
else
{
$resource = imagecreatefromjpeg('test.jpg');
}
$width = imagesx($resource);
$height = imagesy($resource);
$html_start_1 = '
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<div style="display: grid;';
$cols = 'grid-template-columns: ';
$widths = 1;
while($widths <= $width)
{
   $cols .= "1fr ";
   $widths++;
}
$cols .= "; ";
$rows = 'grid-template-rows: ';
$heights = 1;
while($heights <= $height)
{
   $rows .= "1fr ";
   $heights++;
}
$rows .= "; ";
$html_start_2 = '
  grid-gap: 0px;
  padding: 0px;
  border:0px;
  height: '.$height*$scale.'px;
  width:'.$width*$scale.'px;
  ">';
$blocks = '';
$html_end = '
</div></body></html>';

for($y = 0; $y < $height; $y++) {
  for($x = 0; $x < $width; $x++) {
        $color = imagecolorat($resource, $x, $y);
        $color_rgb = imagecolorsforindex($resource, $color);
        $red = $color_rgb["red"];
        $green = $color_rgb["green"];
        $blue = $color_rgb["blue"];
        $alpha = $color_rgb["alpha"];
        $blocks .= '<div style="background-color: rgb('.$red.','.$green.','.$blue.'); margin:-1px;"></div>';

    }
}

$build = $html_start_1.$cols.$rows.$html_start_2.$blocks.$html_end;
return $build;
}
?>

Upvotes: 0

user5701633
user5701633

Reputation: 11

Try converting to html/css. It's more compact than base64 and although I haven't tried it yet, it should work. It uses css to create an image without needing anything external. Dont pay attention to the top, that is the place where the code that does all the work is. Pay attention to the bottom. https://codepen.io/blazeeboy/pen/bCaLE

no code. just something I have to do to get the post online.

Upvotes: -1

Eoin
Eoin

Reputation: 1493

Tom Walsh, what makes you think it is always ISPs that block images? What about email clients? 80% of emails have images blocked as default. Relying on users to have the effort, or knowledge to change these settings is a bad idea.

Using some services such as Mailchimp, give you a new email address each time you send, hence, you cannot add as a safe sender. Techniques such as those mentioned are a great way to get an email list, which has already double opted in, to receive a semi-pictorial version of your email in order to entice them to download images.

That top link works. I used a JPG, I'm not sure what format it accepts. Just so you know, this makes the file a fair bit larger than a normal JPG. Consider whether it's worth using for larger images, but for an email signature, I can see that being a decent use. I've noticed that sometimes when you reply, signatures break... sooooo.... be aware you might end up with a load of <tr><td>A</td></tr>

Final warning... if your email signature did break and end up in code form.... be aware that the default for the top link is "arse" hence... some clients may find that offensive. Perhaps change it to your company name. And remember that making a link for this table-image is going to (a) take a while and (b) majorly bloat this code for the second time.

Upvotes: 0

tomwalsham
tomwalsham

Reputation: 781

I would caution against attempting this sort of trick.

A simple rule with doing 'clever' things with email is first to ask "Do Spammers use this same technique?". If the answer is yes, you can be certain that ISPs are manning their filters to junk email containing it.

In the case of tricking images into displaying, either with the base64 trick or pixeldivs, these techniques have been used for years by spammers and may damage your sending reputation.

If the company in question has a good connection with the recipient they will be happy to display images. Many clients such as gmail will enable images once you've replied or added to contacts. Furthermore, using techniques such as DKIM to sign your headers, using a reputable third party sender, or paying for ReturnPath certification can raise your reputation sufficiently to override the image blocking at most major ISPs.

Upvotes: 0

lukeA
lukeA

Reputation: 54237

Try the "Image to HTML Converter for Email" from STYLECampaign. If I remember it right, you'll get a download link in exchange for subscribing to their newsletter on stylecampaign.com. The tool works ok, has scaling and compression; here's a blog post http://bit.ly/Jhf1CK and a video guide explaining tips and draw backs: http://www.youtube.com/watch?v=VSi51yLQFnc

Upvotes: 1

You Qi
You Qi

Reputation: 9211

Perhaps what you need is just converting your image to URI format.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://jsfiddle.net/z6FFc/

Upvotes: 5

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

Yep, loads of people have done this: http://pgl.yoyo.org/img2html/ is an example.

Upvotes: 7

Related Questions