在缩略图上创建“iPhone 风格图标”效果？答案

【问题标题】：Create an 'iPhone style icon' effect on a thumbnail image?在缩略图上创建“iPhone 风格图标”效果？
【发布时间】：2009-10-23 20:24:10
【问题描述】：

我的 asp.net 项目中有一个图片上传工具，上传时会生成图片的缩略图并保存到磁盘。

我最理想的做法是为这个缩略图应用一些漂亮的样式效果。类似于 iPhone 上的图标外观。可能是轻微的渐变、平滑的圆角和边框。

希望有人知道现有的图书馆可以做到这一点吗？ - 商业或其他（这将让我在 .net GDI 空间中钻研太深！）。

收到的任何指针。谢谢。

【问题讨论】：

我发现 neodynamic.com/Products/IDWebC/… 有一些不错的效果 - 不完美，但非常接近。

标签： c# .net asp.net vb.net

【解决方案1】：

一个想法：如何创建一个带有渐变的 .png 来覆盖现有图像？

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

由于这是针对网络的，我强烈建议不要在上传时尝试将 PNG 与原始文件合并。您最好的选择是在上传时对图像等进行任何调整，然后在整个站点/应用程序中使用图像的地方，将绝对定位的 PNG 浮动在顶部。 PNG 将有 4 个角按您认为合适的方式弯曲，并根据需要应用投影。

如果显示时图像的尺寸过小，则可以使用“门户”或“剪切” overflow:hidden;.

演示；

你的图像是 500 x 500。你想要一个 100 x 100 的图标。如果你用 HTML 重新调整大小，它看起来会很乱，所以放下 div，在你的 500 x 500 图像中添加 background-image 和 @ 987654323@ 和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>

这意味着您的图标不会被破坏，您只需担心上传时重新调整大小。

希望对您有所帮助。

【讨论】：