Question

我不知道在哪里寻找答案，因此我在这里发帖。

所以我得到了一个简单的带有硬编码css的html代码和一些输出数字的php（见图片）：

<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>

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

http://tinypic.com/r/mhbnko/8

无论如何都要将td或div标签放入图像中，以便在加载页面时，用户可以右键单击图像，并将其与测量值一起保存？

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

此致帕特里克

Answer 1

使用标准HTML无法保存到图像选项。除非您的所有用户都下载了某种类型的浏览器扩展程序。还有一些其他选项可能对您有用：

您可以改为在SVG中输出并允许用户下载。大多数用户不能轻易将SVG用作图像。
你可以建立图像，包括测量 PHP中的服务器端，然后在img标记中使用它。
您可以使用Javascript和<canvas>元素组合图像＆amp; Web浏览器中的文本。然后你可以使用画布＆＃39; .toDataURL()函数允许用户将其下载为png。

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

Answer 2

也许您可以使用imagettftext函数在您的图像上书写（http://php.net/manual/en/function.imagettftext.php）。 E.g;

<?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");
?>

鉴于你已经有了一个php页面，也许这将是最简单的解决方案......

将a或div变成图像

2 个答案: