in my app I'm uploading images to server. I encode image from my WP 8.1 and send it to server. Sending and receiving work well but I have problem with image. I don't know why but whem I uploaded the image photographed on portrait after decoding is this image rotated by 90 degrees. Landscapes images are good, but portrait are rotated. Here is my encode and decode code
Encode:
private async Task<string> StorageFileToBase64(StorageFile file)
{
string Base64String = "";
if (file != null)
{
IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);
var reader = new DataReader(fileStream.GetInputStreamAt(0));
await reader.LoadAsync((uint)fileStream.Size);
byte[] byteArray = new byte[fileStream.Size];
reader.ReadBytes(byteArray);
Base64String = Convert.ToBase64String(byteArray);
}
return Base64String;
}
Decode image on server
public void ShowImg(string b64)
{
byte[] imageBytes = Convert.FromBase64String(b64);
// Convert byte[] to Image
var ms = new MemoryStream(imageBytes, 0, imageBytes.Length);
Image image = Image.FromStream(ms, true);
f.pictureBox1.Image = image;
}
string startExpression = "data:image/png;base64,";
using (var ms = new MemoryStream())
{
ms.Flush();
System.Drawing.Image imageIn = System.Drawing.Image.FromFile(fileName);
ms.Position = 0;
imageIn.RotateFlip(System.Drawing.RotateFlipType.Rotate90FlipX);
imageIn.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
var bytes= ms.ToArray();
string fileBase = Convert.ToBase64String(bytes);
var base64= startExpression + fileBase;
imageIn.Dispose();
ms.Dispose();
}
Related
I am making a Note application where I can draw with Windows ink and also paste images. I want to save the images and ink in a single file. Therefore I am converting the image to a string in base64 format so that I can easily serialize it. My problem is when I try to recreate the image from the string.
My code to decode the image data into a base64 string:
var decoder = await BitmapDecoder.CreateAsync(imageStream);
var pixels = await decoder.GetPixelDataAsync();
var bytes = pixels.DetachPixelData();
base64String = Convert.ToBase64String(bytes);
My code to encode the base64 string into an image again (This code does NOT work! The image is not added to the redCanvas):
var bytes = Convert.FromBase64String(base64String);
BitmapImage bitmapImage = new BitmapImage();
using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
{
await stream.WriteAsync(bytes.AsBuffer());
stream.Seek(0);
bitmapImage.SetSource(stream);
}
Image image = new Image();
image.Source = bitmapImage;
// Add the image to a second canvas
redCanvas.Children.Add(image);
Full code for pasting the image and creating the base64 string:
private async Task myButton_ClickAsync(object sender, RoutedEventArgs e)
{
var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.GetContent();
if (dataPackageView.Contains(StandardDataFormats.Bitmap))
{
IRandomAccessStreamReference imageReceived = null;
imageReceived = await dataPackageView.GetBitmapAsync();
if (imageReceived != null)
{
using (var imageStream = await imageReceived.OpenReadAsync())
{
var bitmapImage = new BitmapImage();
bitmapImage.SetSource(imageStream);
var decoder = await BitmapDecoder.CreateAsync(imageStream);
var pixels = await decoder.GetPixelDataAsync();
var bytes = pixels.DetachPixelData();
base64String = Convert.ToBase64String(bytes);
TextBox_Image_Base64.Text = base64;
Image image = new Image();
// Add the image to a list of Images
ListImages.Add(image);
blueCanvas.Children.Add(image);
image.Source = bitmapImage;
TextBlock_Status.Text = "Status : Image is retrieved from the
clipboard and pasted successfully.";
}
}
}
else
{
TextBlock_Status.Text = "Status : Bitmap format is not available in clipboard";
}
}
Anyone have any suggestions as to how I can recreate the image from the string?
Screenshot from my app showing that I am able to paste an image and decode it into a string
How to create Image from string in Base64 (UWP)
We suggest you convet stream buffer to Base64 from imageStream diteactly, but not from PixelData. you could use CryptographicBuffer class to approach.
using (var imageStream = await imageReceived.OpenReadAsync())
{
var buffer = new Windows.Storage.Streams.Buffer((uint)imageStream.Size);
await imageStream.ReadAsync(buffer, (uint)imageStream.Size, InputStreamOptions.None);
String strBase64New = CryptographicBuffer.EncodeToBase64String(buffer);
}
Retrive from base64 string
public static async Task<BitmapImage> LoadBase64(string base64)
{
byte[] bytes = Convert.FromBase64String(base64);
var bitmap = new BitmapImage();
using (MemoryStream ms = new MemoryStream(bytes))
{
await bitmap.SetSourceAsync(ms.AsRandomAccessStream());
}
return bitmap;
}
I am Trying to Convert a Base64 encoded string to A Png Image, But the Code Shows Exception of Parameter is Not Valid on Image.FromStream(). After Debugging i cam up with this error on MemoryStream Object "ReadTimeout = 'ms.ReadTimeout' threw an exception of type 'System.InvalidOperationException'" . I am stuck, Is there any Solution or Alternative to Convert String to Png in C#?
Here is My code
string code = "string";
var databytes = Encoding.Unicode.GetBytes(code);
var base64 = Convert.ToBase64String(databytes);
Byte[] Bytes = Convert.FromBase64String(base64);
//Stream bytes
MemoryStream ms = new MemoryStream(Bytes, 0, Bytes.Length);
//convert image
Image newImage = Image.FromStream(ms);
newImage.Save("~/Content/");
Try this:
byte[] bytes = Convert.FromBase64String(base64);
Image image;
using (MemoryStream ms = new MemoryStream(bytes))
{
image = Image.FromStream(ms);
}
You can convert Base64 string into png in this way:
byte[] bytes = Convert.FromBase64String(base64);
Image image;
using (MemoryStream ms = new MemoryStream(bytes))
{
image = Image.FromStream(ms);
image.Save("~/Content/", System.Drawing.Imaging.ImageFormat.Png);
}
I'm not trying to read the EXIF data on either the device or server, but the data needs to be present on the server.
I am currently sending the image to the server via converting it to a byte[] and then to base64 Convert.ToBase64(byte[]) and sending it using JSON - see code below.
But when I get the file at the other end, it doesn't have any EXIF data. If I get the image off the emulator with the fake SD card, the EXIF data exists.
Does anyone know how to upload the image and then reconstruct it at the other end so that the EXIF data stays intact?
Image to bytes to base64 to JSON
BitmapImage image = new BitmapImage();
image.SetSource(e.ChosenPhoto);
image = ResizeImage(image);
byte[] imageBytes;
using (MemoryStream ms = new MemoryStream())
{
WriteableBitmap btmMap = new WriteableBitmap(image);
System.Windows.Media.Imaging.Extensions.SaveJpeg(btmMap, ms, image.PixelWidth, Image.PixelHeight, 0, 100);
image = null;
imageBytes = ms.ToArray();
}
Base64Image imagestring = new Base64Image();
imagestring.imagestring = Convert.ToBase64String(imageBytes);
string json = JsonConvert.SerializeObject(imagestring);
JSON To base64 to byte[] to image
using (StreamReader sr = new StreamReader(inputStream))
{
postData = sr.ReadToEnd();
}
JavaScriptSerializer deserializer = new JavaScriptSerializer();
Dictionary<string, object> jsonObjects = (Dictionary<string, object>)deserializer.DeserializeObject(postData);
string base64image = jsonObjects["imagestring"].ToString();
byte[] imagebytes = Convert.FromBase64String(base64image);
BitmapImage bitmapImage = new BitmapImage();
MemoryStream ms = new MemoryStream(imagebytes);
bitmapImage.BeginInit();
bitmapImage.CacheOption = BitmapCacheOption.OnDemand;
bitmapImage.CreateOptions = BitmapCreateOptions.None;
bitmapImage.Rotation = Rotation.Rotate0;
bitmapImage.StreamSource = ms;
bitmapImage.EndInit();
bitmapImage.CreateOptions = BitmapCreateOptions.None;
WriteableBitmap wBmp = new WriteableBitmap(bitmapImage);
var encoder = new JpegBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(wBmp));
I had to change my code completely to cut out any connection to Bitmaps or other formats, and just used byte[] through it. See code:
On the app:
ImageData imagedata = new ImageData();
byte[] imagebytes = new byte[e.ChosenPhoto.Length];
e.ChosenPhoto.Read(imagebytes, 0, int.Parse(e.ChosenPhoto.Length.ToString()));
imagedata.imagestring = Convert.ToBase64String(imagebytes);
string json = JsonConvert.SerializeObject(imagedata);
At the server:
JavaScriptSerializer deserializer = new JavaScriptSerializer();
deserializer.MaxJsonLength = 50000000;
Dictionary<string, object> jsonObjects = (Dictionary<string, object>)deserializer.DeserializeObject(postData);
string base64image = jsonObjects["imagestring"].ToString();
byte[] imagebytes = Convert.FromBase64String(base64image);
Guid imagename = Guid.NewGuid();
if (!Directory.Exists(EM.ImagePath))
Directory.CreateDirectory(EM.ImagePath);
using (FileStream sw = new FileStream(EM.ImagePath + imagename + ".jpg", FileMode.CreateNew))
{
sw.Write(imagebytes, 0, imagebytes.Length);
}
I am using this code for upload photo:
MemoryStream photoStream = new MemoryStream();
e.ChosenPhoto.CopyTo(photoStream);
photoStream.Position = 0;
byte[] buf = photoStream.ToArray();
string str = Convert.ToBase64String(buf);
string fileBase64 = HttpUtility.UrlEncode(str);
// Send fileBase64 to server
The server then decode the base64 string and name it "test.jpt".
the problem is that paint doesn't open the image uploaded on my server.
Why ?
i think your base64 string is incorrect. I have written this code, here it is, it works:
BitmapImage a = new BitmapImage();
a.SetSource(e.ChosenPhoto);
WriteableBitmap wb = new WriteableBitmap(a);
MemoryStream ms = new MemoryStream();
wb.SaveJpeg(ms, a.PixelWidth, a.PixelHeight, 0, 50); //50 is a quality of a photo
imageBytes = ms.ToArray();
base64 = System.Convert.ToBase64String(imageBytes);
I have the following code to convert image to base64:
private void btnSave_Click(object sender, RoutedEventArgs e)
{
StreamResourceInfo sri = null;
Uri uri = new Uri("Checked.png", UriKind.Relative);
sri = Application.GetResourceStream(uri);
BitmapImage bitmap = new BitmapImage();
bitmap.SetSource(sri.Stream);
WriteableBitmap wb = new WriteableBitmap(bitmap);
MemoryStream ms = new MemoryStream();
wb.SaveJpeg(ms, bitmap.PixelWidth, bitmap.PixelHeight, 0, 100);
byte[] imageBytes = ms.ToArray();
base64 = System.Convert.ToBase64String(imageBytes);
}
And the following code to get Bitmap image form base 64:
public static BitmapImage base64image(string base64string)
{
byte[] fileBytes = Convert.FromBase64String(base64string);
using (MemoryStream ms = new MemoryStream(fileBytes, 0, fileBytes.Length))
{
ms.Write(fileBytes, 0, fileBytes.Length);
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.SetSource(ms);
return bitmapImage;
}
}
So when i convert and deconvert it is blank.
I know that deconverter works, because, when i give him exact string:
string base64="iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAACH0lEQVR42q3WoZKrMBQGYGRkIpHEoY9DMrh1nUGtzxPcGV7gCsTaK3iBCqa2ipmrVqLrWrmytjL3nBwoEGD30ja/6JaSj/wp3SEIXjpUoB+Oeg0zpoR+NsyoDVOgi39cbYHAy4MQTc0wOYZepxRBUkn9UxxEiNnXxyYwd6w/438hSddHJilv1tqv664Shle1DeJaJihPV9uNQ+NWBRK2QVSr+GjtaFzOIpdjKFShnoY+Gv0N0u0OVLexY48NQ+68JchdpQu/o1piVMu6faJdwjNWIAYyl55bqGUtbndO53TzCIpUpCkdlEm+V3J3Ir8r3uops2+FkTmvx832IGJwN97xS/5Ti0LQ/WLwtbxMal2ueAwvc2c8CAgSJip5U4+tKHECMlUzq2UcA9EyROuJi6/71dtzWAfVcq0Jw1CsYh13kDDteVoirE+zWtLVinQ8ZAS5YlVlvRHWfi3pakUQL0OOwmp/W/vN6Gt5zBIkzEezxnCtMJsxDIECTYmhp3bej4HHzaalNMyAnzE0UBKp6Z1Do2pwd3JkAH6CxlTs/bZOZ661yMwhohDLQqREMWz8UAvWoUQleggehG5dSPUbv28GJlnKHGJsqPi7vuG/MGTyCGslOtkCOayrGOa/indajdudb6FUpXoepgiLHIIMriddyzrkMBhGAqlOH4U2hKCT2j0NdU8jFbzpZ3LQlh9srPqEQ1Y9lEP2CVa99KHvH8mnrGGdl9V9AAAAAElFTkSuQmCC";
Which is my Checked.png converted in online converter. It decompreses perfectly.
And this is my base64, which i get by converting:
"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"
My problem is that string which i get as base64 from my code - is incorrect *What i did wrong?*
What about trying:
public static BitmapImage base64image(string base64string)
{
byte[] fileBytes = Convert.FromBase64String(base64string);
using (MemoryStream ms = new MemoryStream(fileBytes))
{
Image streamImage = Image.FromStream(ms);
context.Response.ContentType = "image/jpeg";
streamImage.Save(context.Response.OutputStream, ImageFormat.Jpeg);
return streamImage;
}
}
I agree with Alexei that your code for reading the image in does look a little strange. I've recently written some code for a similar task that I was doing which might point you in the right direction:
string fileContent = null;
/* Check the file actually has some content to display to the user */
if (uploadFile != null && uploadFile.ContentLength > 0)
{
byte[] fileBytes = new byte[uploadFile.ContentLength];
int byteCount = uploadFile.InputStream.Read(fileBytes, 0, (int)uploadFile.ContentLength);
if (byteCount > 0)
{
fileContent = CreateBase64Image(fileBytes);
}
}
private string CreateBase64Image(byte[] fileBytes)
{
Image streamImage;
/* Ensure we've streamed the document out correctly before we commit to the conversion */
using (MemoryStream ms = new MemoryStream(fileBytes))
{
/* Create a new image, saved as a scaled version of the original */
streamImage = ScaleImage(Image.FromStream(ms));
}
using (MemoryStream ms = new MemoryStream())
{
/* Convert this image back to a base64 string */
streamImage.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
return Convert.ToBase64String(ms.ToArray());
}
}
not an answer: more of a long comment ... OP states that decoding code works perfectly fine, also it looks suspicios. Also code assumed to be verified to work on PNG images, but saving code explicitly produces valid JPG with SaveJpeg call...
Your code that creates stream for reading looks strange - you create stream over existing byte array, than write the same bytes into that stream, and that pass that stream without seeking back to 0 to some method.
Potential fix (assuming BitampImage can accept JPG stream):
don't call Write at all as stream already have the bytes you want
set ms.Position = 0 after writing to the stream.
Note: I'm not sure if it is OK to dispose stream that is a source for BitmapImage, you may need to remove using too.