Develop Reference

How to assign StreamSource to BitmapImage in codebehind?

I have zip file in whick I store FlowDocument (Card.xaml) and folder with images (Media). Images in my FlowDocument have Tag, in which stores their path relative to FlowDocument. For image searching in FlowDocument (FindImages method): Finding all images in a FlowDocument
How I open this zip in RichTextBox. Please pay attention on how I create this images (bitmap), maybe problem there, but i can't understand what's wrong:
string nameOfXamlCardDefault = "Card.xaml";
private void Open_Executed(object sender, ExecutedRoutedEventArgs e)
{
OpenFileDialog dlg = new OpenFileDialog();
if (dlg.ShowDialog() == true)
{
//Open zip file
using (FileStream fullCardZipFile = File.Open(dlg.FileName, FileMode.Open, FileAccess.ReadWrite))
{
//Open zip by ZipArchive
using (ZipArchive archive = new ZipArchive(fullCardZipFile, ZipArchiveMode.Update))
{
//Get entry for xaml (FlowDocument)
ZipArchiveEntry xamlFileEntry = archive.GetEntry(nameOfXamlCardDefault);
//Open xaml
using (Stream xamlFileStreamInZip = xamlFileEntry.Open())
{
//Load FlowDocument into rtbEditor.Document
rtbEditor.Document = XamlReader.Load(xamlFileStreamInZip) as FlowDocument;
//Searching images
List<Image> images = FindImages(rtbEditor.Document).ToList();
foreach (var image in images)
{
var imageFileEntry = archive.GetEntry(image.Tag.ToString());
var bitmap = new BitmapImage();
using (Stream imageFileStream = imageFileEntry.Open())
{
var memoryStream = new MemoryStream();
imageFileStream.CopyTo(memoryStream);
bitmap.BeginInit();
bitmap.CacheOption = BitmapCacheOption.OnLoad;
bitmap.StreamSource = memoryStream;
bitmap.EndInit();
image.Source = bitmap;
}
}
}
}
}
}
return;
}
All images in RichTextBox displays well, but there is no StreamSource in BitmapImage. And it will lead to error later:
<FlowDocument xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" NumberSubstitution.CultureSource="User" AllowDrop="True" PagePadding="5,0,5,0">
<Paragraph>
<Image Tag="Media/image0.png">
<Image.Source>
<BitmapImage CacheOption="OnLoad" BaseUri="{x:Null}"/>
</Image.Source>
</Image>
<Image Tag="Media/image1.png">
<Image.Source>
<BitmapImage CacheOption="OnLoad" BaseUri="{x:Null}"/>
</Image.Source>
</Image>
</Paragraph>
If just copy image and paste in RichTextBox, then it looks like this and this is good:
<Image Height="400" Width="600">
<Image.Source>
<BitmapImage CacheOption="OnLoad" UriSource="./Image1.bmp"
BaseUri="pack://payload:,,wpf1,/Xaml/Document.xaml"/>
</Image.Source>
Is it possible to embed images from zip like copy them and paste? I tried to use Clipboard and worked with MemoryStream. But it didn't help.

You should rewind the MemoryStream after copying the bitmap data, by setting its Position property or calling its Seek() method.
var imageFileEntry = archive.GetEntry(image.Tag.ToString());
if (imageFileEntry != null)
{
using (var imageFileStream = imageFileEntry.Open())
using (var memoryStream = new MemoryStream())
{
imageFileStream.CopyTo(memoryStream);
memoryStream.Position = 0; // here
var bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.CacheOption = BitmapCacheOption.OnLoad;
bitmap.StreamSource = memoryStream;
bitmap.EndInit();
image.Source = bitmap;
}
}
Instead of a BitmapImage, you could also decode a BitmapFrame from the stream.
var imageFileEntry = archive.GetEntry(image.Tag.ToString());
if (imageFileEntry != null)
{
using (var imageFileStream = imageFileEntry.Open())
using (var memoryStream = new MemoryStream())
{
imageFileStream.CopyTo(memoryStream);
memoryStream.Position = 0;
image.Source = BitmapFrame.Create(
memoryStream, BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
}
}

How do I save a complete InkCanvas?

I am trying to save a drawing from InkCanvas. I also implemented zoom capabilities and scrollbars to increase the size of the InkCanvas. The picture that is saved depends on the zoom, and, even when the size is the original, it does not save the complete InkCanvas.
XAML for InkCanvas:
<ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Border x:Name="brd_borger" MouseWheel="cnv_MouseWheel" Background="Aqua" Height="Auto" Width="Auto">
<InkCanvas x:Name="cnv" Width="Auto" Height="Auto" Background="Aqua"
PreviewMouseLeftButtonDown="cnv_MouseLeftButtonDown"
PreviewMouseRightButtonDown="cnv_MouseRightButtonDown"
SelectionChanged="cnv_SelectionChanged"
SelectionMoving="cnv_SelectionMoving"
SelectionMoved="cnv_SelectionMoved"
EditingMode="None">
</InkCanvas>
</Border>
</ScrollViewer>
Zooming Code:
private void cnv_MouseWheel(object sender, MouseWheelEventArgs e)
{
if (Keyboard.IsKeyDown(Key.LeftCtrl) || Keyboard.IsKeyDown(Key.RightCtrl))
{
var matrix = cnv.LayoutTransform.Value;
if (e.Delta > 0)
{
matrix.ScaleAt(1.5, 1.5, e.GetPosition(this).X, e.GetPosition(this).Y);
}
else
{
matrix.ScaleAt(1.0/1.5, 1.0/1.5, e.GetPosition(this).X, e.GetPosition(this).Y);
}
cnv.LayoutTransform = new MatrixTransform(matrix);
}
}
Saving Code:
private void Save_Click(object sender, RoutedEventArgs e)
{
SaveFileDialog dlg = new SaveFileDialog();
dlg.DefaultExt = ".png";
dlg.Filter = ODLG_FILTER_IMAGES;
Nullable<bool> result = dlg.ShowDialog();
if (result == true)
{
string filename = dlg.FileName;
MemoryStream ms = new MemoryStream();
FileStream fs = new FileStream(filename, FileMode.Create);
RenderTargetBitmap rtb = new RenderTargetBitmap((int)cnv.Width, (int)cnv.Height, 96d, 96d, PixelFormats.Default);
rtb.Render(cnv);
BmpBitmapEncoder encoder = new BmpBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(rtb));
encoder.Save(fs);
fs.Close();
}
}

Since you don't want the size of the image to be the same as the actual size of the InkCanvas, you need to specify the actual target image size somwhere. You could then use a DrawingContext and a VisualBrush to create the image:
private void Save_Click(object sender, RoutedEventArgs e)
{
SaveFileDialog dlg = new SaveFileDialog();
dlg.DefaultExt = ".png";
dlg.Filter = ODLG_FILTER_IMAGES;
if (dlg.ShowDialog() == true)
{
string filename = dlg.FileName;
MemoryStream ms = new MemoryStream();
FileStream fs = new FileStream(filename, FileMode.Create);
//define your image size here...
const int Width = 200;
const int Height = 200;
RenderTargetBitmap rtb = new RenderTargetBitmap(Width, Height, 96d, 96d, PixelFormats.Default);
Rect bounds = VisualTreeHelper.GetDescendantBounds(cnv);
DrawingVisual dv = new DrawingVisual();
using (DrawingContext ctx = dv.RenderOpen())
{
VisualBrush vb = new VisualBrush(cnv);
ctx.DrawRectangle(vb, null, new Rect(new Point(), bounds.Size));
}
rtb.Render(dv); ;
BmpBitmapEncoder encoder = new BmpBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(rtb));
encoder.Save(fs);
fs.Close();
}
}

Using C#, load .png images with transparency via URI, crop them and draw them on a canvas, then save the canvas images as a png file

My goal is to load .png images with transparency via URI, crop them and draw them on a canvas, then save the canvas images as a png file.
In javascript, it would look like:
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "a.png";
ctx.drawImage(img,10,10,20,20,30,30,10,10);
//drawing more images...
something(canvas.toDataURL('image/png'));
How could I do that in C# Visual Studios 2013? What would come the closest to this JS code?
I don't mind using WPF or Winforms. I do not need to be able to display the image. I only need to be able to save it.

One way to do it is with GDI+ (assumes using System.Drawing;):
using (var b = new Bitmap()) { // This is your canvas
Graphics g = Graphics.FromImage(b); // This is your graphics context
g.DrawImage(Image.FromFile("a.png"),
new Rectangle(30, 30, 10, 10), 10, 10, 20, 20,
GraphicsUnit.Pixel);
// Do something with b (e.g. b.Save(…))
}
If you want the same data URI, it’s (assumes using System.Drawing.Imaging;):
using (var ms = new MemoryStream()) {
using (var b = new Bitmap()) {
// …
b.Save(ms, ImageFormat.Png);
}
string base64 = Convert.ToBase64String(ms.ToArray());
something("data:image/png;base64," + base64);
}

You can use WPF as an image generator.
The namespaces you'll need include:
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
And a sample snippet of code to get you started:
DrawingVisual drawingVisual = new DrawingVisual();
DrawingContext drawingContext = drawingVisual.RenderOpen();
// Let's draw a rectangle!
var gradientBrush = new LinearGradientBrush();
gradientBrush.GradientStops.Add(new GradientStop(Colors.Azure, 0.0));
gradientBrush.GradientStops.Add(new GradientStop(Colors.SteelBlue, 1.0));
drawingContext.DrawRectangle(gradientBrush, null, new Rect(0, 0, _imageWidth, _imageHeight));
drawingContext.Close();
// Now to save it
RenderTargetBitmap bmp = new RenderTargetBitmap(_imageWidth, _imageHeight, 96, 96, PixelFormats.Pbgra32);
bmp.Render(drawingVisual);
PngBitmapEncoder png = new PngBitmapEncoder();
png.Frames.Add(BitmapFrame.Create(bmp));
byte[] imageBinary = null;
using (System.IO.MemoryStream memoryStream = new System.IO.MemoryStream())
{
png.Save(memoryStream);
imageBinary = memoryStream.GetBuffer();
}

Using PngBitmapDecoder, MemoryStream, FlowDocument, XPSDocument to Preview Images

I'm not quite sure what's happening, so I apologize if the title isn't specific. I've provided the code and xaml below which demonstrates my problem. I have the static methods that I call to convert bitmap to byte [] and vice versa. These methods work fine when used to bind source to image control. However, when I use them to assign a source to images which are children of BlockUIContainer as the code demostrates... I get the same image as the previous on my second call to ByteArrayToBitmapSource.
I'm clueless. What is obvious to me, however, is that the second image has the properties of the image that I expect it display, but is apparently the wrong image.
C# MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO;
using System.Drawing.Imaging;
using System.Drawing;
using System.Windows.Xps.Packaging;
using System.Windows.Xps;
namespace FlowDocumentTest
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, IDisposable
{
private XpsDocument xpsDocument;
private String randomFileName;
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
FlowDocument doc = new FlowDocument();
doc.Blocks.Add(new Paragraph(new Run("Test")));
Section section1 = new Section();
BlockUIContainer blockUIContainer1 = new BlockUIContainer();
blockUIContainer1.Child = new System.Windows.Controls.Image { Source = Source1 };
Section section2 = new Section();
BlockUIContainer blockUIContainer2 = new BlockUIContainer();
blockUIContainer2.Child = new System.Windows.Controls.Image { Source = Source2 };
doc.Blocks.Add(blockUIContainer1);
doc.Blocks.Add(blockUIContainer2);
randomFileName = System.IO.Path.GetRandomFileName();
this.xpsDocument = new XpsDocument(randomFileName, System.IO.FileAccess.ReadWrite);
XpsDocumentWriter writer = XpsDocument.CreateXpsDocumentWriter(xpsDocument);
writer.Write(((IDocumentPaginatorSource)doc).DocumentPaginator);
this.Viewer.Document = xpsDocument.GetFixedDocumentSequence();
}
public BitmapSource Source1
{
get
{
byte[] tmp = BitmapSourceToByteArray(GetBitmapImage(new Bitmap(#"source1.jpg")));
return ByteArrayToBitmapSource(tmp);
}
}
public BitmapSource Source2
{
get
{
byte[] tmp = BitmapSourceToByteArray(GetBitmapImage(new Bitmap(#"source2.bmp")));
return ByteArrayToBitmapSource(tmp);
}
}
public static BitmapImage GetBitmapImage(Bitmap bitmap)
{
BitmapImage bitmapImage = new BitmapImage();
using (MemoryStream stream = new MemoryStream())
{
bitmap.Save(stream, ImageFormat.Png);
stream.Position = 0;
bitmapImage.BeginInit();
bitmapImage.StreamSource = stream;
bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
bitmapImage.EndInit();
}
return bitmapImage;
}
public static byte[] BitmapSourceToByteArray(BitmapSource bitmapSource)
{
byte[] data;
PngBitmapEncoder encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(bitmapSource));
using (MemoryStream ms = new MemoryStream())
{
encoder.Save(ms);
data = ms.ToArray();
}
return data;
}
public static BitmapSource ByteArrayToBitmapSource(byte[] data)
{
BitmapSource result;
using (MemoryStream ms = new MemoryStream(data))
{
PngBitmapDecoder decoder = new PngBitmapDecoder(ms, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.OnLoad);
result = decoder.Frames[0];
}
return result;
}
protected override void OnClosing(System.ComponentModel.CancelEventArgs e)
{
base.OnClosing(e);
this.Dispose();
}
public void Dispose()
{
this.xpsDocument.Close();
if (System.IO.File.Exists(randomFileName))
System.IO.File.Delete(randomFileName);
}
}
}
XAML MainWindow.xaml
<Window x:Class="FlowDocumentTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DocumentViewer Name="Viewer" />
</Grid>
</Window>

I guess it has to do with returning a BitmapSource as oppose to a discreet BitmapImage. Created this method and called this method instead, and it works as I expect.
Still don't know whether this is FlowDocument or XPSDocument related issue.
public static BitmapSource GetBitmapImage(Bitmap bitmap)
{
BitmapImage bitmapImage = new BitmapImage();
using (MemoryStream stream = new MemoryStream())
{
bitmap.Save(stream, ImageFormat.Png);
stream.Position = 0;
bitmapImage.BeginInit();
bitmapImage.StreamSource = stream;
bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
bitmapImage.EndInit();
}
return bitmapImage;
}

bitmap not saving image to memory stream

Need a little help here. I have a app that I am creating that mergies two pictures together. The issue is when i am trying to convert the bitmap into a bitmpaimage to display the result on the screen. from what i can tell, the image is not being save to the memory stream at "NwImg.Save(memory,ImageFormat.Jpeg);" Any ideas??
//The Code
//bitmap to bitmapimage conversion
using (MemoryStream memory = new MemoryStream())
{//NwImg is type Bitmap, and at this point i checked properties and values did copy over from the merging
NwImg.Save(memory, ImageFormat.Jpeg);//here image NwImg.save is suppose to transfer to memory
memory.Position = 0;
Nwbi.StreamSource = memory;//memory stream is showing null
Nwbi.CacheOption = BitmapCacheOption.OnLoad;
}
I don't know if this matter but NwImg represents a bitmap that was created by merging a png image on top of a jpeg. I didn't read anything that said it matter but i figured i would through that in there.
/// here is all the code as requested david
//Main c#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;
namespace PicMerger2
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
Pic currentPic = new Pic();
BitmapImage bi = new BitmapImage(new Uri("\\original photo.jpg"));
BitmapImage Nwbi = new BitmapImage();
public MainWindow()
{
InitializeComponent();
OriginalPhoto.Source = bi;
ResultPhoto.Source = Nwbi;
}
private void apply_Click(object sender, RoutedEventArgs e)
{
Bitmap NwImg;
//bitmapimage to bitmap conversion
using (MemoryStream outStream = new MemoryStream())
{
BitmapEncoder enc = new BmpBitmapEncoder();
enc.Frames.Add(BitmapFrame.Create(bi));
enc.Save(outStream);
System.Drawing.Bitmap MarkThisPic = new System.Drawing.Bitmap(outStream);
// return bitmap; <-- leads to problems, stream is closed/closing ...
NwImg = new Bitmap(MarkThisPic);
}
NwImg = currentPic.MergerTheseTwo(NwImg);
//bitmap to bitmapimage conversion
using (MemoryStream memory = new MemoryStream())
{
NwImg.Save(memory, ImageFormat.Jpeg);
memory.Position = 0;
Nwbi.StreamSource = memory;
Nwbi.CacheOption = BitmapCacheOption.OnLoad;
}
ResultPhoto.Source = Nwbi;
}
}
}
//Main xaml
<Window x:Class="PicMerger2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<StackPanel>
<Image x:Name="OriginalPhoto" Height="200" Stretch="UniformToFill" Source="{Binding}"></Image>
<Label>Original Images</Label>
</StackPanel>
<Button x:Name="apply" Click="apply_Click" Height="25" >Apply Watermark</Button>
<StackPanel>
<Image x:Name="ResultPhoto" Height="200" Stretch="UniformToFill" Source="{Binding}"></Image>
<Label>Watermarked Image</Label>
</StackPanel>
</StackPanel>
</Grid>
</Window>
// pic class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;
using System.Drawing.Drawing2D;
namespace PicMerger2
{
class Pic
{
Bitmap Watermark = new Bitmap(PicMerger2.Properties.Resources._Watermark);
public Bitmap MergerTheseTwo(Bitmap BottomImage)
{
try
{
using (var canvas = Graphics.FromImage(BottomImage))
{
canvas.InterpolationMode = InterpolationMode.HighQualityBicubic;
// canvas.DrawImage(BottomImage, new Rectangle(0, 0, BottomImage.Width, BottomImage.Height), new Rectangle(0, 0, BottomImage.Width, BottomImage.Height), GraphicsUnit.Pixel);
canvas.DrawImage(Watermark, 0, 0);
canvas.Save();
//Save to current picture
Bitmap NewImage = new Bitmap(BottomImage.Width, BottomImage.Height, canvas);
return NewImage;
}
}
catch (Exception)
{
throw;
}
}
}
}

You will need to change a couple of things so that your code can work.
Use the following code for the Bitmap to BitmapImage conversion.
using (MemoryStream memory = new MemoryStream())
{
NwImg.Save(memory, ImageFormat.Jpeg);
memory.Position = 0;
Nwbi = new BitmapImage();
Nwbi.BeginInit();
Nwbi.StreamSource = memory;
Nwbi.CacheOption = BitmapCacheOption.OnLoad;
Nwbi.EndInit();
}
Inside your Pic class, replace these lines
//Save to current picture
Bitmap NewImage = new Bitmap(BottomImage.Width, BottomImage.Height, canvas);
return NewImage;
to this
return BottomImage;
since the overload of the Bitmap class that you are using, doesn't create a new bitmap based on the Graphics object but just its resolution (this results to an empty image). So, since you draw onto the BottomImage bitmap, you just need to return that image.

The variable "memory" cannot possibly be null on the line where you commented "memory stream is showing null" when that line executes because it is definitely assigned in the "using" block 4 lines above it. I'm guessing you put a debugger breakpoint too early in the method. Try putting your breakpoint on the line where you assign Nwbi.CacheOption and see if the debugger tells you what you expected.