Question

我基本上有一张世界地图的图像，我想把一个图像放在这个世界地图图像的指定像素坐标上。

这是一个网站，所以理想情况下，解决方案应该是PHP或Javascript（我避免使用Java和Flash，因为我希望它尽可能简单。）

我查看了processing.js库，但只是为了执行这个简单的任务，这是一种大而臃肿的方式。是否有预先存在的Javascript函数可以让我这样做？或者我可以使用更简单的JavaScript库？（对于我来说，processing.js有点太高级，我无法让它工作lol）

就PHP解决方案而言，我更倾向于从服务器上卸载负载以完成此任务，但我仍然希望听到在PHP中使用它的方法（如果它们合适的话）。

谢谢！

Answer 1

最简单的方法是将图片图像放在地图图片上并将其设置在css中，如下所示：

<div style="position:relative">
  <img src="map.png" style="position:absolute; top:0px; left:0px; z-index:0"/>
  <img src="pin.png" style="position:absolute; top:50px; left:30px; z-index:1"/>
</div>

Answer 2

我建议使用PHP的GD Library扩展。从这里你可以操纵图像并产生一个新的输出。然后你可以在某处缓存它并重定向用户，或者通过调整输出头并将二进制数据写入stdout来提供图像。

header("Content-Type: image/jpeg");

Answer 3

正如Aren所说，GD对此有好处。

但是，GD库的替代方案是Imagemagick。这个gentle introduction非常有用。

ImageMagick®是一个用于创建，编辑和组合位图图像的软件套件。它可以以各种格式（超过100种）读取，转换和写入图像，包括DPX，EXR，GIF，JPEG，JPEG-2000，PDF，PhotoCD，PNG，Postscript，SVG和TIFF。使用ImageMagick翻译，翻转，镜像，旋转，缩放，剪切和变换图像，调整图像颜色，应用各种特殊效果，或绘制文本，线条，多边形，椭圆和Bézier曲线。

Answer 4

你真的必须在图像本身中拥有'pin图像'吗？简单的HTML＆amp; CSS（绝对定位）可以很好地解决这个问题，对于每个参与者来说几乎没有任何负担，唯一的缺点是图像不能保存，包括覆盖图像。

PHP或Javascript或其他 - 在图像上绘制简单的形状？

4 个答案: