如何将图像转换为html？
Posted
技术标签:
【中文标题】如何将图像转换为html？【英文标题】：How to convert image to html? 【发布时间】：2012-05-31 19:45:34 【问题描述】：有没有办法将图像转换为图像的html 等效项，方法是将html 表分成许多单元格，每个单元格都有特定的背景颜色，就像图像中的像素一样？很像 ASCII 艺术。
我认为这是一种在电子邮件签名中添加公司徽标的方式，而不必担心电子邮件客户端会阻止图像。
【问题讨论】：
【参考方案1】：是的，很多人都这样做了：http://pgl.yoyo.org/img2html/ 就是一个例子。
【讨论】：
不起作用。甚至它自己的示例图像也会生成：This server does not support the imagecreatefromx-png() function; exiting。还有其他的吗？
这太糟糕了。好吧，电子邮件签名和 HTML 电子邮件通常很糟糕，所以也许它也一样！ :)
我不知道——我是网络人而不是电子邮件人。【参考方案2】：
也许您需要的只是将图像转换为 URI 格式。
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" >
http://jsfiddle.net/z6FFc/
【讨论】：
否，因为普通电子邮件客户端不允许超过 5KB 的签名 贵公司标志的尺寸（高*宽）是多少？【参考方案3】：试试 STYLECampaign 中的“用于电子邮件的图像到 HTML 转换器”。如果我没记错的话，您将获得一个下载链接，以换取您在 stylecampaign.com 上订阅他们的时事通讯。该工具工作正常，具有缩放和压缩功能；这是一篇博客文章 http://bit.ly/Jhf1CK 和一个视频指南，解释了技巧和缺点：http://www.youtube.com/watch?v=VSi51yLQFnc
【讨论】：
【参考方案4】：我会告诫不要尝试这种伎俩。
使用电子邮件做“聪明”事情的一个简单规则是首先询问“垃圾邮件发送者是否使用相同的技术？”。如果答案是肯定的，您可以确定 ISP 正在使用他们的过滤器来处理包含它的垃圾邮件。
在诱骗图像显示的情况下，无论是使用 base64 技巧还是 pixeldiv，这些技术已被垃圾邮件发送者使用多年，可能会损害您的发送声誉。
如果相关公司与收件人关系良好，他们会很乐意展示图片。一旦您回复或添加到联系人，许多客户端（如 gmail）将启用图像。此外，使用 DKIM 等技术签署您的标头、使用信誉良好的第三方发件人或支付 ReturnPath 认证费用可以提高您的声誉，足以覆盖大多数主要 ISP 的图像屏蔽。
【讨论】：
【参考方案5】：Tom Walsh，是什么让您认为阻止图像的总是 ISP？电子邮件客户端呢？默认情况下，80% 的电子邮件都屏蔽了图像。依靠用户的努力或知识来更改这些设置是一个坏主意。
使用某些服务，例如 Mailchimp，每次发送时都会为您提供一个新的电子邮件地址，因此，您无法添加为安全发件人。上述技术是获取电子邮件列表的好方法，该列表已经双重选择加入，以接收电子邮件的半图片版本，以吸引他们下载图像。
顶部链接有效。我使用的是 JPG，我不确定它接受什么格式。就像您知道的那样，这使文件比普通的 JPG 大一点。考虑是否值得将其用于更大的图像，但对于电子邮件签名，我认为这是一个不错的用途。我注意到，有时当您回复时，签名会中断... sooooo .... 请注意，您最终可能会收到大量<tr><td>A</td></tr>
最后警告...如果您的电子邮件签名确实中断并以代码形式结束...请注意顶部链接的默认设置是“arse”因此...一些客户可能会觉得这很冒犯。也许将其更改为您的公司名称。请记住，为该表格图像创建链接将 (a) 花费一些时间，并且 (b) 第二次使该代码膨胀。
【讨论】：
【参考方案6】：终于完成了一个 PHP、CSS 和 HTML 的函数 最终这种方法应该被认为是Jpeg & Png to 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;
?>
【讨论】：
【参考方案7】：尝试转换为 html/css。它比 base64 更紧凑，虽然我还没有尝试过，但它应该可以工作。它使用 css 来创建图像，而不需要任何外部的东西。不要注意顶部，那是完成所有工作的代码所在的地方。注意底部。 https://codepen.io/blazeeboy/pen/bCaLE
no code. just something I have to do to get the post online.
【讨论】：
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review @RohitGupta：链接指向进行转换的工具（如要求的那样）。我怀疑还有更多有用的信息可以添加。如果您认为问题是要求提供场外资源/工具，则应改为标记。 @IInspectable，OP 没有要求工具。他要求一种方法来做到这一点，可以是代码。无论您以哪种方式对其进行切片，这都是仅链接的答案，用户已将垃圾放入其中以使其被接受！归根结底，这是我的意见。如果再有2个审稿人同意，将被删除。如果他们不这样做，它就会留下来。总有一些方法可以增强答案，例如发布屏幕截图或示例结果。反对票不是我的。我更喜欢发布 cmets。 @RohitGupta：我同意你的观点，答案应该比这更高。不过，平心而论，我发现这个问题比这个答案更令人怀疑。它询问某事是否可能，并解释了一种方法。由于 OP 已经知道需要做什么，我将其解读为要求使用工具为他们做这件事。当然，一个好的答案会解释实现细节（包括 HTML 表格和 CSS），并在理想情况下对比两种解决方案。并且可以选择包含指向进行转换的工具的链接。以上是关于如何将图像转换为html？的主要内容，如果未能解决你的问题，请参考以下文章