How to show multi paged image in <img/> tag?

问题

I have created a image bytearray from ReportViewer like below

bytes=  reportViewer.ServerReport.Render("Image", null, out mimeType, out encoding, out extension, out streamids, out warnings);

And i saved in a physical path using below code which created a image has 12 pages in it.

System.IO.File.WriteAllBytes(@"C:\test.jpeg", bytes);

I wanted to show this image in <img> tag with all the pages one after other.

I have tried <img src="c://test.jpeg" /> which shows up only first page in it.

Can anyone help me on this ?

回答1:

Find the answer below which i used to resolve this. Find the steps

First- Get all the frames from the stream of image as list of Images

public List<Image> GetAllFrames(Stream sm)
        {
            List<Image> images = new List<Image>();
            Bitmap bitmap = new Bitmap(sm);
            int count = bitmap.GetFrameCount(FrameDimension.Page);
            for (int idx = 0; idx < count; idx++)
            {
                bitmap.SelectActiveFrame(FrameDimension.Page, idx);
                MemoryStream byteStream = new MemoryStream();
                bitmap.Save(byteStream, ImageFormat.Tiff);

                images.Add(Image.FromStream(byteStream));
            }
            return images;
        }

Second - Combine all frames in to a single bitmap.

public Bitmap CombineAllFrames(List<Image> test)
        {
            int width = 0;
            int height = 0;
            Bitmap finalImage = null;
            try
            {
                foreach (Bitmap bitMap in test)
                {
                    height += bitMap.Height;
                    width = bitMap.Width > width ? bitMap.Width : width;
                }
                finalImage = new Bitmap(width, height);
                using (System.Drawing.Graphics gc = Graphics.FromImage(finalImage))
                {
                    gc.Clear(Color.White);
                    int offset = 0;
                    foreach (Bitmap bitmap in test)
                    {
                        gc.DrawImage(bitmap, new Rectangle(0, offset, bitmap.Width, bitmap.Height));
                        offset += bitmap.Width;
                    }
                }
            }
            catch (Exception)
            {
                throw;
            }
            return finalImage;
        }

this methods creates a bitmap which will append all the frames into single one vertically. If you want it horizontally make update it to

    width += bitmap.Width;
           height = bitmap.Height > height ? bitmap.Height : height;
g.DrawImage(image, 
           new System.Drawing.Rectangle(offset, 0, image.Width, image.Height));

Third step - Now if you want a byte array for the created image call the below method.

public byte[] GetBytesFromImage(Bitmap finalImage)
        {
            ImageConverter convertor = new ImageConverter();
            return (byte[])convertor.ConvertTo(finalImage, typeof(byte[]));
        }

I think this will helps some one really needed. Please post if someone find a easy way to do it.

回答2:

To show several pictures, use the html <img> tag.

To show unique pictures, I recommend you relabel your pictures to something like img1, img2, img3, etc... so that in your img tag you can do something like this:

<img src="folder/img<?php echo rand(1,10); ?>.jpg" />

来源：https://stackoverflow.com/questions/12560070/how-to-show-multi-paged-image-in-img-tag