在缩略图图像上创建“iPhone风格图标”效果?

3
我在我的asp.net项目中有一个图片上传功能,上传后会生成并保存缩略图。我希望对这个缩略图应用一些漂亮的样式效果,类似于iPhone上的图标外观,例如轻微渐变、平滑圆角和边框。希望有人知道是否有现成的库可以做到这一点?商业或其他(这将避免我深入了解.net GDI空间!)。非常感谢任何指导。谢谢。

3个回答

2
一种想法:创建一个渐变的 .png 图片以覆盖现有的图片?

0

由于这是为网页设计的,我强烈建议您不要在上传时尝试将PNG与原始文件合并。 您最好在上传时调整图像大小等,然后在整个站点/应用程序中使用图像时,将绝对定位的PNG浮动在顶部。 PNG将具有其四个角落的曲线,并按您希望应用阴影效果。

如果您在显示图像时大小不确定,可以通过使用overflow:hidden;进行“门户”或“切割”。

举个例子:

您的图像为500 x 500。 您想要一个100 x 100的图标。 如果通过HTML进行重新调整,它会看起来一团糟,因此请放置div,添加500 x 500图像的background-imageoverflow:hidden;以及width:100px;height:100px;。 然后创建另一个div,应用position:absolute;left:0;top:0;z-index:2;width:100px;height:100px;,在其中放置透明的PNG。

接下来,在您的页面上;

<div style="background-image:url('/images/thumbnail.jpg');width:100px;height:100px;overflow:hidden;z-index:1;">
    <div style="position:absolute;left:0;top:0;z-index:2;width:100px;height:100px;">
        <a href="/ifclickable.htm"><img src="/images/transparent.png" alt="alt for img here" /></a>
    </div>
</div>

这意味着您的图标不会被破坏,您所担心的只是上传后的调整大小问题。
希望对您有所帮助。

0

创建更大尺寸的图形,然后使用绘制方法将原始图像放置在预期坐标上。并绘制从文件加载或在内存中生成的其他位图或图像。对于反射效果,您可以使用现成的算法或使用GetPixel方法自己实现。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接