Web优化之雪碧图—动态生成雪碧图读凡客产品页所想

最新推荐文章于 2024-11-12 11:26:15 发布

dz45693

最新推荐文章于 2024-11-12 11:26:15 发布

阅读量1.6w

点赞数 4

分类专栏： ASP.NET C#.NET基础文章标签：产品 web 优化 string filenames stylesheet

本文链接：https://blog.csdn.net/ma_jiang/article/details/7725035

版权

本文探讨了凡客诚品产品页中动态生成雪碧图的技术，提出通过joinimages.ashx动态生成雪碧图，但建议结合生成相应样式以优化HTML。文章介绍了一种生成雪碧图的方法，即合并多个图片到一个Bitmap，并提供了实现工具SpriteImageCreate的截图。最终，文章展示了如何在HTML中引用动态生成的雪碧图样式，强调使用class而非直接定位以提高可维护性。

摘要由CSDN通过智能技术生成

最近访问凡客诚品产品页留意了一下，这个页面的一些图动态做成了雪碧图，如：

从这张图片我们可以看到.SpriteWashings这个样式的背景图是通过joinimages.ashx动态生成，这个想法很好，但是没有生成样式。所以它的html使用了style="background-position: 0px -80px"这个来定位，个人认为这种方式不好，应该通过添加class 来定位，这就需要生成雪碧图的时候要生成相应的样式。

生成雪碧图的原理很简单：根据多个图片地址生成对应的Bitmap，在把这些Bitmap画到一个Bitmap上。

其核心代码如下：

    private static bool GenerateSprite(ImageSettings settings, int x, int y, List<Bitmap> images, StringBuilder cssCompatOutput)
        {
            if (settings.TileInYAxis)
            {
                y += images.Count;
            }
            else
            {
                x += images.Count;
            }

            using (Bitmap sprite = new Bitmap(x, y))
            {
                using (Graphics drawingSurface = Graphics.FromImage(sprite))
                {

                    drawingSurface.Clear(settings.BackgroundColor);

                    int xOffset = 0;
                    int yOffset = 0;
                    foreach (Bitmap image in images)
                    {
                        drawingSurface.DrawImage(image, new Rectangle(xOffset, yOffset, image.Width, image.Height));
                        if (image.Tag != null)
                            Gener