如何在HTML中创建一个javascript来生成/返回现有图像中的图像？

Question

我正在开发一个使用谷歌地图的网页。我自定义了谷歌地图的图标/标记，如果它指向某个特定位置。图标/标记已成功自定义并指向从Facebook返回的图像：

以图标/标记传递的示例图像：https://graph.facebook.com/astig.bertz/picture

我想要一个图像的边框。换句话说，我想从Facebook个人资料图片中创建另一个图像。

有人能帮助我吗？感谢.....

Answer 1

您想要使用Canvas。如果不是最终显示，那么至少对于图像处理。

https://developer.mozilla.org/en/Canvas_tutorial

他们甚至有一个例子，在图像周围放置一个奇特的边框：

https://developer.mozilla.org/en/Canvas_tutorial/Using_images#Art_gallery_example

Answer 2

如果不使用服务器资源，这是不可能的。 JavaScript本身不具备以该粒度操纵二进制数据的能力。

但是，您可以尝试使用一些javascript / css技巧来使该图像成为您放置边框的div的背景网址。 AKA之类的东西：

<div style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: url(/path/to/some/image); border: 1px solid black;">
</div>