如何将图片转换为HTML？

Question

如何将图片转换为HTML？

htmlimageemailsignature

7

有没有一种方法可以将图片转换为相应的HTML代码？这个HTML表格被分成许多单元格，每个单元格都有特定的背景颜色，就像图像中的像素一样。这很像ASCII艺术。

我认为这是在电子邮件签名中使用企业标志的一种方式，而不必担心电子邮件客户端会阻止图像。

- CJ7

7个回答

5

也许你只需要将图片转换成URI格式。

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

http://jsfiddle.net/z6FFc/

- You Qi

不行，因为普通的电子邮件客户端不允许超过5KB的签名。 - CJ7

你们公司的标志的尺寸（高*宽）是多少？ - You Qi

1

尝试使用STYLECampaign的“电子邮件图像转HTML转换器”。如果我没记错的话，你需要在stylecampaign.com上订阅他们的新闻通讯才能获得下载链接。该工具运行良好，具有缩放和压缩功能；这里有一篇博客文章http://bit.ly/Jhf1CK和一个视频指南，解释了一些技巧和缺点：http://www.youtube.com/watch?v=VSi51yLQFnc。

- lukeA

0

Tom Walsh，你认为阻止图片的总是ISP吗？那邮件客户端呢？80%的电子邮件默认情况下都会阻止图片。依赖用户付出努力或知识来更改这些设置是一个不好的想法。

使用一些服务，如Mailchimp，每次发送时都会给你一个新的电子邮件地址，因此你无法将其添加为安全发件人。像上面提到的技术一样，这是一个很好的方法来获取一个已经双重确认过的电子邮件列表，以接收半图片版本的电子邮件，以诱使他们下载图片。

顶部链接有效。我用了JPG格式，不确定它是否接受其他格式。请注意，这会使文件比普通JPG大得多。考虑一下是否值得在较大的图片中使用，但对于电子邮件签名，我认为这是一个不错的用途。我注意到有时候当你回复时，签名会被破坏...所以....要知道你可能最终会得到一堆A。

最后警告……如果您的电子邮件签名确实破裂并以代码形式出现……请注意顶部链接的默认值为“屁股”，因此……一些客户可能会认为这是冒犯性的。也许将其更改为公司名称。并记住，为此表格图像创建链接将需要（a）一段时间和（b）大幅度膨胀该代码，这是第二次。

- Eoin

0

我建议不要尝试这种技巧。

在处理电子邮件时，一个简单的规则是先问一下：“垃圾邮件发送者是否使用了同样的技术？”如果答案是肯定的，那么你可以确定ISP正在使用过滤器来拦截包含此技术的垃圾邮件。

在欺骗图像显示方面，无论是使用base64技巧还是像素divs，这些技术都被垃圾邮件发送者使用了多年，并可能损害您的发送声誉。

如果涉及的公司与收件人有良好的联系，他们将很乐意显示图像。许多客户端（如gmail）会在您回复或添加到联系人后启用图像。此外，使用DKIM等技术签署您的标头，使用值得信赖的第三方发件人，或支付ReturnPath认证费用可以提高您的声誉，从而足以覆盖大多数主要ISP的图像阻止。

- tomwalsham

0

终于完成了一个PHP、CSS和HTML函数
最终这种方法应该被视为Jpeg和Png转换为Div。

实现这个方法的步骤是创建一个由HTML元素组成的网格，为每个值设置RGB背景颜色。

希望它能帮助到任何来到这里的人，我最初来到这里只找到了Base64转换，没有原始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;
}
?>

- Empire of E

-1

尝试转换为html/css。它比base64更紧凑，虽然我还没有尝试过，但应该可以工作。它使用css创建图像而不需要任何外部内容。不要关注顶部，那是执行所有工作的代码所在的位置。请注意底部。https://codepen.io/blazeeboy/pen/bCaLE

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

- user5701633

虽然此链接可能回答了问题，但最好在此处包含答案的基本部分并提供链接作为参考。如果链接的页面更改，仅链接的答案可能会变得无效。- [来自审查] (/ review / low-quality-posts / 10632887) - Rohit Gupta

@RohitGupta：该链接指向一个可以进行转换的工具（如所要求）。我怀疑是否还有更多有用的信息需要添加。如果您认为问题正在寻求离线资源/工具，请标记它。 - IInspectable

@IInspectable，OP并没有要求工具。他要求的是一种可以编写代码的方法。无论如何，这都是一个仅包含链接的答案，用户已经将垃圾放入其中以便被接受！归根结底，这只是我的观点。如果再有两个审阅者同意，它将被删除。如果他们不同意，它将保留。总有办法来增强答案，比如发布截图或示例结果。而且，我没有给它点踩。我更喜欢发表评论。 - Rohit Gupta

@RohitGupta：我同意你的观点，答案应该比这个更高质量。然而公平地说，我认为问题本身更有问题。它问是否可能，并解释了一种方法来实现它。由于OP已经知道需要做什么，我会把它看作是在寻找一个工具来帮助他们完成。当然，一个好的答案应该解释实现细节（包括HTML表格和CSS），并理想情况下对两种解决方案进行对比。并且可以包含一个将其转换的工具链接。 - IInspectable

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rich Bradshaw · Accepted Answer

7

很多人都做过这个： http://pgl.yoyo.org/img2html/ 是其中一个例子。

注：此网站可以将图片转换为HTML代码。

- Rich Bradshaw

不起作用。即使是它自己的示例图像也会生成：“此服务器不支持imagecreatefromx-png()函数；退出”。还有其他的吗？ - CJ7

1

那太糟糕了。嗯，电子邮件签名和HTML电子邮件总体上都很糟糕，所以也许这样做也没什么不好！ :) - Rich Bradshaw

我不知道 - 我更多是一个网站人而不是电子邮件人。 - Rich Bradshaw