[Silverlight] 做完物件快照(snapshot)後,將圖片存檔
2010/11/18
最近手上都是在忙不是Silverlight的專案..
手上積一堆問題…
找時間來還一下好了…
朋友問我說如何可以把一個物件給拍下來…
並且把圖存下來…
這分成兩個步驟…
1.把物件快照成WriteableBitmap 可以參考 [Silverlight] 用WriteableBitmap對物件做Snapshot(快照)
2.接下來的步驟就是把 WriteableBitmap 存成圖片
所以接下來的範例我會延續 [Silverlight] 用WriteableBitmap對物件做Snapshot(快照) 這一篇繼續..
畫面配置如下:
比上次多的就是多一顆可以存檔的按鈕他可以把目前快照給存起來…
XAML Code 如下:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="DragSample.MainPage" Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="Black" Width="640" Height="480" > <Canvas x:Name="cvsSnapShop" MouseMove="SnapShop_MouseMove" > <Image HorizontalAlignment="Left" Margin="102,48,0,202" Width="150" Source="avr.jpg" > <i:Interaction.Behaviors> <ei:MouseDragElementBehavior/> </i:Interaction.Behaviors> </Image> <Image HorizontalAlignment="Left" Width="150" Source="van.jpg" Canvas.Left="274" Canvas.Top="140"> <i:Interaction.Behaviors> <ei:MouseDragElementBehavior/> </i:Interaction.Behaviors> </Image> <Image HorizontalAlignment="Right" Margin="0,0,0,0" Width="150" Source="avr.png" Canvas.Left="60" Canvas.Top="305"> <i:Interaction.Behaviors> <ei:MouseDragElementBehavior/> </i:Interaction.Behaviors> </Image> </Canvas> <Image Height="120" HorizontalAlignment="Right" Margin="0,0,0,0" Name="imgSync" Stretch="Fill" VerticalAlignment="Bottom" Width="160" /> <Button Height="23" Name="btnShot" Content="存檔" Width="75" HorizontalAlignment="Left" Margin="550,30,0,0" VerticalAlignment="Top" Click="btnShot_Click" /> </Grid> </UserControl>
這樣畫面上就完成了..
本文重點在於儲存snapshot 如果您對拖曳效果有問題可以參考此篇(Blend 做拖曳超簡單)..
接下來..我們必須在專案下面加入兩個對於圖片作編碼的Class …
此 PNG Encoder 作者為 Joe Stegman's
參考網址是 :
http://blogs.msdn.com/b/jstegman/archive/2008/04/21/dynamic-image-generation-in-silverlight.aspx
1. 加入 EditableImage.cs
C# Code :
using System; using System.IO; using System.Windows.Media; namespace DragSample { public class EditableImage { private int _width = 0; private int _height = 0; private bool _init = false; private byte[] _buffer; private int _rowLength; public event EventHandler<EditableImageErrorEventArgs> ImageError; public EditableImage(int width, int height) { this.Width = width; this.Height = height; } public int Width { get { return _width; } set { if (_init) { OnImageError("Error: Cannot change Width after the EditableImage has been initialized"); } else if ((value <= 0) || (value > 2047)) { OnImageError("Error: Width must be between 0 and 2047"); } else { _width = value; } } } public int Height { get { return _height; } set { if (_init) { OnImageError("Error: Cannot change Height after the EditableImage has been initialized"); } else if ((value <= 0) || (value > 2047)) { OnImageError("Error: Height must be between 0 and 2047"); } else { _height = value; } } } public void SetPixel(int col, int row, Color color) { SetPixel(col, row, color.R, color.G, color.B, color.A); } public void SetPixel(int col, int row, byte red, byte green, byte blue, byte alpha) { if (!_init) { _rowLength = _width * 4 + 1; _buffer = new byte[_rowLength * _height]; // Initialize for (int idx = 0; idx < _height; idx++) { _buffer[idx * _rowLength] = 0; // Filter bit } _init = true; } if ((col > _width) || (col < 0)) { OnImageError("Error: Column must be greater than 0 and less than the Width"); } else if ((row > _height) || (row < 0)) { OnImageError("Error: Row must be greater than 0 and less than the Height"); } // Set the pixel int start = _rowLength * row + col * 4 + 1; _buffer[start] = red; _buffer[start + 1] = green; _buffer[start + 2] = blue; _buffer[start + 3] = alpha; } public Color GetPixel(int col, int row) { if ((col > _width) || (col < 0)) { OnImageError("Error: Column must be greater than 0 and less than the Width"); } else if ((row > _height) || (row < 0)) { OnImageError("Error: Row must be greater than 0 and less than the Height"); } Color color = new Color(); int _base = _rowLength * row + col + 1; color.R = _buffer[_base]; color.G = _buffer[_base + 1]; color.B = _buffer[_base + 2]; color.A = _buffer[_base + 3]; return color; } public Stream GetStream() { Stream stream; if (!_init) { OnImageError("Error: Image has not been initialized"); stream = null; } else { stream = PngEncoder.Encode(_buffer, _width, _height); } return stream; } private void OnImageError(string msg) { if (null != ImageError) { EditableImageErrorEventArgs args = new EditableImageErrorEventArgs(); args.ErrorMessage = msg; ImageError(this, args); } } public class EditableImageErrorEventArgs : EventArgs { private string _errorMessage = string.Empty; public string ErrorMessage { get { return _errorMessage; } set { _errorMessage = value; } } } } }
2. 加入 PngEncoder.cs
C# Code 如下:
using System; using System.IO; namespace DragSample { public class PngEncoder { private const int _ADLER32_BASE = 65521; private const int _MAXBLOCK = 0xFFFF; private static byte[] _HEADER = { 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A }; private static byte[] _IHDR = { (byte)'I', (byte)'H', (byte)'D', (byte)'R' }; private static byte[] _GAMA = { (byte)'g', (byte)'A', (byte)'M', (byte)'A' }; private static byte[] _IDAT = { (byte)'I', (byte)'D', (byte)'A', (byte)'T' }; private static byte[] _IEND = { (byte)'I', (byte)'E', (byte)'N', (byte)'D' }; private static byte[] _4BYTEDATA = { 0, 0, 0, 0 }; private static byte[] _ARGB = { 0, 0, 0, 0, 0, 0, 0, 0, 8, 6, 0, 0, 0 }; public static Stream Encode(byte[] data, int width, int height) { MemoryStream ms = new MemoryStream(); byte[] size; // Write PNG header ms.Write(_HEADER, 0, _HEADER.Length); // Write IHDR // Width: 4 bytes // Height: 4 bytes // Bit depth: 1 byte // Color type: 1 byte // Compression method: 1 byte // Filter method: 1 byte // Interlace method: 1 byte size = BitConverter.GetBytes(width); _ARGB[0] = size[3]; _ARGB[1] = size[2]; _ARGB[2] = size[1]; _ARGB[3] = size[0]; size = BitConverter.GetBytes(height); _ARGB[4] = size[3]; _ARGB[5] = size[2]; _ARGB[6] = size[1]; _ARGB[7] = size[0]; // Write IHDR chunk WriteChunk(ms, _IHDR, _ARGB); // Set gamma = 1 size = BitConverter.GetBytes(1 * 100000); _4BYTEDATA[0] = size[3]; _4BYTEDATA[1] = size[2]; _4BYTEDATA[2] = size[1]; _4BYTEDATA[3] = size[0]; // Write gAMA chunk WriteChunk(ms, _GAMA, _4BYTEDATA); // Write IDAT chunk uint widthLength = (uint)(width * 4) + 1; uint dcSize = widthLength * (uint)height; // First part of ZLIB header is 78 1101 1010 (DA) 0000 00001 (01) // ZLIB info // // CMF Byte: 78 // CINFO = 7 (32K window size) // CM = 8 = (deflate compression) // FLG Byte: DA // FLEVEL = 3 (bits 6 and 7 - ignored but signifies max compression) // FDICT = 0 (bit 5, 0 - no preset dictionary) // FCHCK = 26 (bits 0-4 - ensure CMF*256+FLG / 31 has no remainder) // Compressed data // FLAGS: 0 or 1 // 00000 00 (no compression) X (X=1 for last block, 0=not the last block) // LEN = length in bytes (equal to ((width*4)+1)*height // NLEN = one's compliment of LEN // Example: 1111 1011 1111 1111 (FB), 0000 0100 0000 0000 (40) // Data for each line: 0 [RGBA] [RGBA] [RGBA] ... // ADLER32 uint adler = ComputeAdler32(data); MemoryStream comp = new MemoryStream(); // Calculate number of 64K blocks uint rowsPerBlock = _MAXBLOCK / widthLength; uint blockSize = rowsPerBlock * widthLength; uint blockCount; ushort length; uint remainder = dcSize; if ((dcSize % blockSize) == 0) { blockCount = dcSize / blockSize; } else { blockCount = (dcSize / blockSize) + 1; } // Write headers comp.WriteByte(0x78); comp.WriteByte(0xDA); for (uint blocks = 0; blocks < blockCount; blocks++) { // Write LEN length = (ushort)((remainder < blockSize) ? remainder : blockSize); if (length == remainder) { comp.WriteByte(0x01); } else { comp.WriteByte(0x00); } comp.Write(BitConverter.GetBytes(length), 0, 2); // Write one's compliment of LEN comp.Write(BitConverter.GetBytes((ushort)~length), 0, 2); // Write blocks comp.Write(data, (int)(blocks * blockSize), length); // Next block remainder -= blockSize; } WriteReversedBuffer(comp, BitConverter.GetBytes(adler)); comp.Seek(0, SeekOrigin.Begin); byte[] dat = new byte[comp.Length]; comp.Read(dat, 0, (int)comp.Length); WriteChunk(ms, _IDAT, dat); // Write IEND chunk WriteChunk(ms, _IEND, new byte[0]); // Reset stream ms.Seek(0, SeekOrigin.Begin); return ms; // See http://www.libpng.org/pub/png//spec/1.2/PNG-Chunks.html // See http://www.libpng.org/pub/png/book/chapter08.html#png.ch08.div.4 // See http://www.gzip.org/zlib/rfc-zlib.html (ZLIB format) // See ftp://ftp.uu.net/pub/archiving/zip/doc/rfc1951.txt (ZLIB compression format) } private static void WriteReversedBuffer(Stream stream, byte[] data) { int size = data.Length; byte[] reorder = new byte[size]; for (int idx = 0; idx < size; idx++) { reorder[idx] = data[size - idx - 1]; } stream.Write(reorder, 0, size); } private static void WriteChunk(Stream stream, byte[] type, byte[] data) { int idx; int size = type.Length; byte[] buffer = new byte[type.Length + data.Length]; // Initialize buffer for (idx = 0; idx < type.Length; idx++) { buffer[idx] = type[idx]; } for (idx = 0; idx < data.Length; idx++) { buffer[idx + size] = data[idx]; } // Write length WriteReversedBuffer(stream, BitConverter.GetBytes(data.Length)); // Write type and data stream.Write(buffer, 0, buffer.Length); // Should always be 4 bytes // Compute and write the CRC WriteReversedBuffer(stream, BitConverter.GetBytes(GetCRC(buffer))); } private static uint[] _crcTable = new uint[256]; private static bool _crcTableComputed = false; private static void MakeCRCTable() { uint c; for (int n = 0; n < 256; n++) { c = (uint)n; for (int k = 0; k < 8; k++) { if ((c & (0x00000001)) > 0) c = 0xEDB88320 ^ (c >> 1); else c = c >> 1; } _crcTable[n] = c; } _crcTableComputed = true; } private static uint UpdateCRC(uint crc, byte[] buf, int len) { uint c = crc; if (!_crcTableComputed) { MakeCRCTable(); } for (int n = 0; n < len; n++) { c = _crcTable[(c ^ buf[n]) & 0xFF] ^ (c >> 8); } return c; } /* Return the CRC of the bytes buf[0..len-1]. */ private static uint GetCRC(byte[] buf) { return UpdateCRC(0xFFFFFFFF, buf, buf.Length) ^ 0xFFFFFFFF; } private static uint ComputeAdler32(byte[] buf) { uint s1 = 1; uint s2 = 0; int length = buf.Length; for (int idx = 0; idx < length; idx++) { s1 = (s1 + (uint)buf[idx]) % _ADLER32_BASE; s2 = (s2 + s1) % _ADLER32_BASE; } return (s2 << 16) + s1; } } }
接下來就可以 來處理 那一顆 btnShot 的 Click 事件..
private void btnShot_Click(object sender, System.Windows.RoutedEventArgs e) { //使用SaveFileDialog 開啟存檔位置跟檔名 var dlg = new SaveFileDialog(); dlg.DefaultExt = ".png"; dlg.Filter = "PNG File|*.png"; if (dlg.ShowDialog() == true) { //將cvsSnapShot 那 Canvas 轉成WriteableBitmap 後交由PngEncoder去做編碼 using (var pngStream = GetPngStream(new WriteableBitmap(cvsSnapShop, null))) using (var file = dlg.OpenFile()) { byte[] binaryData = new Byte[pngStream.Length]; long bytesRead = pngStream.Read(binaryData, 0, (int)pngStream.Length); file.Write(binaryData, 0, (int)pngStream.Length); file.Flush(); file.Close(); } } }
接下來因為有呼叫到 處理Stream的function : GetPngStream
Code :
private Stream GetPngStream(WriteableBitmap bmp) { // Joe Stegman's PNG Encoder // Reference : http://blogs.msdn.com/b/jstegman/archive/2008/04/21/dynamic-image-generation-in-silverlight.aspx EditableImage imageData = new EditableImage(bmp.PixelWidth, bmp.PixelHeight); for (int y = 0; y < bmp.PixelHeight; ++y) { for (int x = 0; x < bmp.PixelWidth; ++x) { int pixel = bmp.Pixels[bmp.PixelWidth * y + x]; imageData.SetPixel(x, y, (byte)((pixel >> 16) & 0xFF), (byte)((pixel >> 8) & 0xFF), (byte)(pixel & 0xFF), (byte)((pixel >> 24) & 0xFF) ); } } return imageData.GetStream(); }
接下來就可以編譯執行啦…
請注意 btnShot 這顆按鈕不要放到 Canvas裡面不然會拍到…XD
結果:
檔案下載:
讚一下
範例預覽:
標籤:
Silverlight
|
This entry was posted on 下午6:46
and is filed under
Silverlight
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
訂閱:
張貼留言 (Atom)
0 意見:
張貼留言