Html 制作一个<；td>；或div'；它变成了一个形象

我不知道在哪里可以找到答案，所以我在这里发布

因此，我得到了一个简单的html代码，其中包含硬编码的css和一些输出数字的php（见图）：

M
M
M

这将输出以下内容（这是一个屏幕截图-因此数字在图像中）：

是否有任何方法可以将td或div标记放入图像中，以便在加载页面时，用户能够右键单击图像，并将其与测量值一起保存

现在，测量值是文本，因此，如果用户右键单击图像并保存，则不会保存测量值

问候,，

---

Patrick

也许您可以使用

imagettftext

函数在图像上书写（）。例如：

---

鉴于您已经有了一个php页面，这可能是最简单的解决方案…

使用标准HTML不可能使用“保存到图像”选项。除非你所有的用户都下载了某种浏览器扩展。还有一些其他选项可能适合您：

您可以改为使用SVG输出，并允许用户下载。 不过，大多数用户将无法轻松地将SVG用作图像

您可以在屏幕上创建图像，包括测量值 然后在img标记中使用它

您可以使用Javascript和

元素来组合 web浏览器中的图像和文本。然后可以使用画布的

.toDataURL（）

函数，允许用户将其作为png下载

---

如果可以的话，我推荐最后一个选择。有很多关于这方面的教程，canvas元素非常适合它。

No，只有当数字硬编码在图像上时（如lpg的答案中所建议的）。

<td style="vertical-align: top; width:50%">
    <span>
    <img src="/wp-content/themes/ateo/img/room_measurements.png" style="width:260px; margin-left: auto; display: block;" />
    </span>
    <span style="margin-top: -110px;display: block;margin-bottom: 60px;text-align: right;margin-right: 260px;">
    <?php echo $rooms[$i]['height'] ?> m.
    </span>
    <span style="display: block;margin-top: -140px;margin-right: 150px;text-align: right;margin-bottom: 90px;transform: rotate(-18deg);">
    <?php echo $rooms[$i]['length'] ?> m.
    </span>
    <span style="margin-top: -125px;display: block;margin-left: 260px;transform: rotate(30deg);margin-bottom: 95px;">
    <?php echo $rooms[$i]['width'] ?> m.
    </span>
    </td>

<?php
// Set the enviroment variable for GD
putenv('GDFONTPATH=' . realpath('.'));

// Create from png image
$im = imagecreatefrompng("/wp-content/themes/ateo/img/room_measurements.png");

// Create some colors
$black = imagecolorallocate($im, 0, 0, 0);

// Replace path by your own font path
$font = 'arial.ttf';

$height = $rooms[$i]['height']; // 8
$length = $rooms[$i]['length ']; // 10
$width = $rooms[$i]['width']; // 5

imagettftext($im, 14, 0, 10, 120, $black, $font, $height." m.");
imagettftext($im, 14, 18, 130, 45, $black, $font, $length." m.");
imagettftext($im, 14, -30, 320, 30, $black, $font, $width." m.");

// Save the file with the measures
imagepng($im,"/wp-content/themes/ateo/img/room_measurements_values.png");
?>