Xamarin FilePicker ImageSource - xamarin

I have an application that the user can add photos through the gallery using the FilePicker.PickMultipleAsync.
And also user can take a picture this functionality is using CrossMedia plugin.
If the user takes a photo (CrossMedia) in portrait format, the photo is converted into ImageSource to be displayed.
If the user selects the images, it does the same conversion process to ImageSource, but in this case the photos are automatically rotated to the right.
This happens with photos that were taken by the camera's native app.
If the user downloads any image and selects it from the gallery, the problem does not happen.
The problem started after switching the plugin to FilePicker.
What can I do to display the original image?
Versions:
Xamarin.Forms: 5.0.0.2401
Xamarin.Essentials: 1.7.3
Code of the plugin
var result = await FilePicker.PickMultipleAsync(new PickOptions
{
PickerTitle = "Choose Images",
FileTypes = FilePickerFileType.Images
});
if (result != null)
{
foreach (var item in result)
{
AttachedFiles.Add(new AttachmentFiles(item));
}
}
public AttachmentFiles(FileResult imgSource)
{
var imageAsBytes = ImageHelper.ConvertStreamToByteArray(Task.Run(async () => await imgSource.OpenReadAsync()).Result);
var resizer = DependencyService.Get<IImageResize>();
this.ImageId = Guid.NewGuid();
this.Source = ImageSource.FromStream(() => new MemoryStream(imageAsBytes));
this.SourceT = ImageSource.FromStream(() => new MemoryStream(resizer.ResizeImage(imageAsBytes, 70, 70)));
}
The image on the left I downloaded from the internet and it appears correctly.
The image on the right I took by the camera and chose from the gallery

I solved this problem with code
public class PhotoPickerService : IPhotoPickerService
{
public async Task<byte[]> ImageToArrayAsync(string path)
{
try
{
var exif = new Android.Media.ExifInterface(path);
string orientation = exif.GetAttribute(Android.Media.ExifInterface.TagOrientation);
//Get the bitmap.
var originalImage = BitmapFactory.DecodeFile(path);
//Set imageSize and imageCompression parameters.
var imageSize = .40;
var imageCompression = 45;
//Resize it and then compress it to Jpeg.
var width = originalImage.Width * imageSize;
var height = originalImage.Height * imageSize;
var scaledImage = Bitmap.CreateScaledBitmap(originalImage, (int)width, (int)height, true);
var matrix = new Matrix();
switch (orientation)
{
case "1": // landscape
break;
case "3":
matrix.PreRotate(180);
scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
matrix.Dispose();
matrix = null;
break;
case "4":
matrix.PreRotate(180);
scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
matrix.Dispose();
matrix = null;
break;
case "5":
matrix.PreRotate(90);
scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
matrix.Dispose();
matrix = null;
break;
case "6": // portrait
matrix.PreRotate(90);
scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
matrix.Dispose();
matrix = null;
break;
case "7":
matrix.PreRotate(-90);
scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
matrix.Dispose();
matrix = null;
break;
case "8":
matrix.PreRotate(-90);
scaledImage = Bitmap.CreateBitmap(scaledImage, 0, 0, scaledImage.Width, scaledImage.Height, matrix, true);
matrix.Dispose();
matrix = null;
break;
}
byte[] imageBytes;
using (MemoryStream ms = new MemoryStream())
{
scaledImage.Compress(Bitmap.CompressFormat.Jpeg, imageCompression, ms);
imageBytes = ms.ToArray();
await File.WriteAllBytesAsync(path, imageBytes);
}
originalImage.Recycle();
scaledImage.Recycle();
originalImage.Dispose();
scaledImage.Dispose();
return imageBytes;
}
catch (IOException ex)
{
_ = ex.Message;
return null;
}
}
}
Source: https://github.com/xamarin/Essentials/issues/1514#issuecomment-922233449

Related

If i mirror an image with the canvas multiple times, why does the image lose quality?

mirror() {
const mirrorCanvas = document.createElement('canvas') as HTMLCanvasElement;
const clientRect = this.parentRef.nativeElement.getBoundingClientRect();
const image = new Image();
image.src = this.imageBase64;
image.onload = () => {
mirrorCanvas.width = clientRect.width;
mirrorCanvas.height = clientRect.height;
const ctx = mirrorCanvas.getContext('2d');
if (ctx) {
ctx.scale(1, -1);
ctx.drawImage(image, 0, 0, clientRect.width, clientRect.height);
this.imageBase64 = (mirrorCanvas.toDataURL(`image/${this.format}`, 1));
}
}
}
I have this code, which mirrors the image.
However if i keep mirroring this image, it will lose quality, even if i set the quality to 1.
Why is that?

Add a texture on a sphere by Urhosharp

I'm using Xamarin.Forms + Urhosharp, I've got a problem to set texture from an image on a sphere. The problem is that texture.Load or texture.SetData always returns false. I did try different methods like SetData, Load, resize texture and image (to a power of 2 number) and ... but none of them worked. Here is my code:
private async void CreateScene()
{
Input.SubscribeToTouchEnd(OnTouched);
_scene = new Scene();
_octree = _scene.CreateComponent<Octree>();
_plotNode = _scene.CreateChild();
var baseNode = _plotNode.CreateChild().CreateChild();
var plane = baseNode.CreateComponent<StaticModel>();
plane.Model = CoreAssets.Models.Sphere;
var cameraNode = _scene.CreateChild();
_camera = cameraNode.CreateComponent<Camera>();
cameraNode.Position = new Vector3(10, 15, 10) / 1.75f;
cameraNode.Rotation = new Quaternion(-0.121f, 0.878f, -0.305f, -0.35f);
Node lightNode = cameraNode.CreateChild();
var light = lightNode.CreateComponent<Light>();
light.LightType = LightType.Point;
light.Range = 100;
light.Brightness = 1.3f;
int size = 3;
baseNode.Scale = new Vector3(size * 1.5f, 1, size * 1.5f);
var imageStream = await new HttpClient().GetStreamAsync("some 512 * 512 jpg image");
var ms = new MemoryStream();
imageStream.CopyTo(ms);
var image = new Image();
var isLoaded = image.Load(new MemoryBuffer(ms));
if (!isLoaded)
{
throw new Exception();
}
var texture = new Texture2D();
//var isTextureLoaded = texture.Load(new MemoryBuffer(ms.ToArray()));
var isTextureLoaded = texture.SetData(image);
if (!isTextureLoaded)
{
throw new Exception();
}
var material = new Material();
material.SetTexture(TextureUnit.Diffuse, texture);
material.SetTechnique(0, CoreAssets.Techniques.Diff, 0, 0);
plane.SetMaterial(material);
try
{
await _plotNode.RunActionsAsync(new EaseBackOut(new RotateBy(2f, 0, 360, 0)));
}
catch (OperationCanceledException) { }
}
Please help!
To Create a material from a 2D Texture, you can use Material.FromImage .
Refer following documentation for more detail.
model.SetMaterial(Material.FromImage("earth.jpg"));
https://developer.xamarin.com/api/type/Urho.Material/
https://developer.xamarin.com/api/member/Urho.Material.FromImage/p/System.String/
private async void CreateScene()
{
_scene = new Scene();
_octree = _scene.CreateComponent<Octree>();
_plotNode = _scene.CreateChild();
var baseNode = _plotNode.CreateChild().CreateChild();
var plane = _plotNode.CreateComponent<StaticModel>();
plane.Model = CoreAssets.Models.Sphere;
plane.SetMaterial(Material.FromImage("earth.jpg"));
var cameraNode = _scene.CreateChild();
_camera = cameraNode.CreateComponent<Camera>();
cameraNode.Position = new Vector3(10, 15, 10) / 1.75f;
cameraNode.Rotation = new Quaternion(-0.121f, 0.878f, -0.305f, -0.35f);
Node lightNode = cameraNode.CreateChild();
var light = lightNode.CreateComponent<Light>();
light.LightType = LightType.Point;
light.Range = 100;
light.Brightness = 1.3f;
int size = 3;
baseNode.Scale = new Vector3(size * 1.5f, 1, size * 1.5f);
Renderer.SetViewport(0, new Viewport(_scene, _camera, null));
try
{
await _plotNode.RunActionsAsync(new EaseBackOut(new RotateBy(2f, 0, 360, 0)));
}
catch (OperationCanceledException) { }
}

When I create pdf with itextg from ListView only the same listview child appears

I am trying to create a pdf from listview items. This is my listview:
This is the result:
Below is my code:
ListView def = (ListView) findViewById(R.id.ist);
ListAdapter adapter = def.getAdapter();
int itemscount = adapter.getCount();
/*int itemsposition = adapter.getItem(position);*/
Toast.makeText(getApplicationContext(), itemscount + " temaxia", Toast.LENGTH_LONG).show();
int allitemsheight = 0;
List<Bitmap> bmps = new ArrayList<Bitmap>();
for (int i = 0; i < itemscount ; i++) {
View childView = adapter.getView(i, null, def);
/*View childView = def.getChildAt(1);*/
childView.measure(View.MeasureSpec.makeMeasureSpec(def.getWidth(),
View.MeasureSpec.EXACTLY),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
childView.layout(0, 0, childView.getMeasuredWidth(),
childView.getMeasuredHeight());
childView.setDrawingCacheEnabled(true);
childView.buildDrawingCache();
childView.getDrawingCache();
/*bmps.add(childView.getDrawingCache());
allitemsheight+=childView.getMeasuredHeight();*/
Bitmap bigbitmap = Bitmap.createBitmap(def.getMeasuredWidth(),
childView.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas bigcanvas = new Canvas(bigbitmap);
def.draw(bigcanvas);
Paint paint = new Paint();
bigcanvas.drawBitmap(bigbitmap,0,childView.getMeasuredHeight(),paint);
bigbitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);
Image myImg = Image.getInstance(stream.toByteArray());
myImg.scalePercent(45, 60);
myImg.setAlignment(Image.ALIGN_CENTER);
// add image to document
doc.add(myImg);
doc.add( new Paragraph());
}
I just cant find why it only gets childview in first position despite it is inside a for loop. Can anyone help me? Thanks.
I changed all the consept to: Create a big image from all childviews and then cut it to multiple pages A4 size.See below....NOTICE that first doc is never opened and never closed,but after creating image document is opened and closed properly ...............
File file = new File(dir, flname + ".pdf");
FileOutputStream fOut = new FileOutputStream(file);
FileOutputStream fOut2 = new FileOutputStream(file);
pdfWriter.getInstance(doc, fOut);
// open the document
/* doc.open();*/
ByteArrayOutputStream stream = new ByteArrayOutputStream();
//////////////////////
ListView def = (ListView) findViewById(R.id.ist);
ListAdapter adapter = def.getAdapter();
int itemscount = adapter.getCount();
/*int itemsposition = adapter.getItem(position);*/
Toast.makeText(getApplicationContext(), itemscount + " temaxia", Toast.LENGTH_LONG).show();
View childView =null;
int allitemsheight = 0;
List<Bitmap> bmps = new ArrayList<Bitmap>();
for (int i = 0; i < itemscount ; i++) {
childView = adapter.getView(i,null,def);
/*childView = def.getChildAt(i);*/
childView.measure(View.MeasureSpec.makeMeasureSpec(def.getWidth(),
View.MeasureSpec.EXACTLY),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
childView.layout(0, 0, childView.getMeasuredWidth(),
childView.getMeasuredHeight());
childView.setDrawingCacheEnabled(true);
childView.buildDrawingCache();
/*childView.getDrawingCache();*/
bmps.add(childView.getDrawingCache());
allitemsheight+=childView.getMeasuredHeight();
}
Bitmap bigbitmap = Bitmap.createBitmap(def.getMeasuredWidth(),
allitemsheight , Bitmap.Config.ARGB_8888);
Paint paint = new Paint();
Canvas bigcanvas = new Canvas(bigbitmap);
for (int i = 0; i < bmps.size(); i++) {
Bitmap bmp = bmps.get(i);
bigcanvas.drawBitmap(bmp, 0, iHeight, paint);
/*bigcanvas.drawColor(Color.WHITE);
def.draw(bigcanvas);*/
iHeight+=bmp.getHeight();
bmp.recycle();
bmp=null;
}
bigbitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);
Image myImg = Image.getInstance(stream.toByteArray());
myImg.scalePercent(45, 60);
myImg.setAlignment(Image.ALIGN_CENTER);
/*if(myImg.getWidth() >= doc.getPageSize().getWidth() || myImg.getHeight() >= doc.getPageSize().getHeight()){
myImg.scaleToFit(doc.getPageSize());
doc.newPage();
}
myImg.setAbsolutePosition((doc.getPageSize().getWidth() - myImg.getScaledWidth()) / BaseField.BORDER_WIDTH_MEDIUM, (doc.getPageSize().getHeight() - myImg.getScaledHeight()) / BaseField.BORDER_WIDTH_MEDIUM);
doc.add(myImg);
doc.add( new Paragraph());*/
///////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////
Document document = new Document();
PdfWriter pdfWriter2 = PdfWriter.getInstance(document, fOut2);
document.open();
PdfContentByte content = pdfWriter2.getDirectContent();
myImg.scaleAbsolute(PageSize.A4);
myImg.setAbsolutePosition(0, 0);
float width = PageSize.A4.getWidth();
float heightRatio = myImg.getHeight() * width / myImg.getWidth();
int nPages = (int) (heightRatio / PageSize.A4.getHeight());
float difference = heightRatio % PageSize.A4.getHeight();
while (nPages >= 0) {
document.newPage();
content.addImage(myImg, width, 0, 0, heightRatio, 0, -((--nPages * PageSize.A4.getHeight()) + difference));
}
document.close();
} catch (DocumentException de) {
Log.e("PDFCreator", "DocumentException:" + de);
} catch (IOException e) {
Log.e("PDFCreator", "ioException:" + e);
} finally {
/*doc.close();*/
}

iTextSharp - Add image to PDF from Datatable

I try to create a PDF report from a datatable. One of the columns contents image. How can I extract the image from datatable and insert into PDF table? I'm using iTextShap version 5.4.2.0. Here is the code:
public void Report(DataTable dt, string output)
{
Document doc = new Document(PageSize.LETTER, 50, 50, 80, 50);
PdfWriter PDFWriter = PdfWriter.GetInstance(doc, new FileStream(output, FileMode.Create));
PDFWriter.ViewerPreferences = PdfWriter.PageModeUseOutlines;
iTextSharp.text.Font hel8 = FontFactory.GetFont(BaseFont.HELVETICA, 8);
doc.Open();
PdfPTable table = new PdfPTable(dt.Columns.Count);
float[] widths = new float[] { 1.2f, 1.2f, 1.2f, 1.2f, 1f, 4f, 1f, 4f };
table.SetWidths(widths);
table.WidthPercentage = 100;
PdfPCell cell = new PdfPCell(new Phrase("NewCells"));
cell.Colspan = dt.Columns.Count;
foreach (DataColumn c in dt.Columns)
{
table.AddCell(new Phrase(c.ColumnName, hel8));
}
foreach (DataRow r in dt.Rows)
{
if (dt.Rows.Count > 0)
{
table.AddCell(new Phrase(r[0].ToString(), hel8));
table.AddCell(new Phrase(r[1].ToString(), hel8));
table.AddCell(new Phrase(r[2].ToString(), hel8));
table.AddCell(new Phrase(r[3].ToString(), hel8));
table.AddCell(new Phrase(r[4].ToString(), hel8));
table.AddCell(new Phrase(r[5].ToString(), hel8));
byte[] byt = (byte[])r[6];
MemoryStream ms = new MemoryStream(byt);
System.Drwaing.Image sdi = System.Drawing.Image.FromStream(ms);
Image img = Image.GetInstance(sdi); <-- this is the problem code
table.AddCell(img);
table.AddCell(new Phrase(r[7].ToString(), hel8));
}
}
doc.Add(table);
}
doc.Close();
}
Update: #nekno, all of your suggestions are worked.
But I still need to correct the casting at line:
byte[] byt = (byte[])r[6];
It gave me a casting exception from VS2008. So I added the conversion function (pulled it from stackoverflow):
byte[] ImageToByte(System.Drawing.Image img)
{
byte[] byteArray = new byte[0];
using (MemoryStream stream = new MemoryStream())
{
img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
stream.Close();
byteArray = stream.ToArray();
}
return byteArray;
}
And revised the code:
byte[] byt = ImageToByte((System.Drawing.Image)dt.Rows[e][6]);
Thanks.
What exactly is the problem? What happens when you use your problem code?
Try one of the other Image.GetInstance() overloads:
You can pass the byte array directly:
byte[] byt = (byte[])r[6];
Image img = Image.GetInstance(byt);
Or you can pass the Stream:
byte[] byt = (byte[])r[6];
MemoryStream ms = new MemoryStream(byt);
Image img = Image.GetInstance(ms);
Or you can give iTextSharp more info about the image format:
byte[] byt = (byte[])r[6];
MemoryStream ms = new MemoryStream(byt);
System.Drawing.Image sdi = System.Drawing.Image.FromStream(ms);
Image img = Image.GetInstance(sdi, ImageFormat.Png);
If your column can be cast to a System.Drawing.Image, then you can use it directly:
Image img = Image.GetInstance((System.Drawing.Image)r[6], System.Drawing.Imaging.ImageFormat.Png);
I have suggested steps how shows how to add image into PDF, given below code snippet show how to add logo into your PDF using iTextsharp, follow provided below steps:
I have provided link to download "itextsharp" component from given link http://sourceforge.net/projects/itextsharp/
You have to add reference into your application.
Next you have to add required namespaces "iTextsharp.text.html", "iTextsharp.text" to consume its best properties.
Now you have to add code snippet into your application given at the end, add code snippet under "button click" in code behind.
Hope it will work for you !!!
protected void btnPDF_Click(object sender, ImageClickEventArgs e)
{
DataTable dtn = new DataTable();
dtn = GetDataTable();
dtPDF = dtn.Copy();
for (int i = 0; i <= dtn.Rows.Count - 1; i++)
{
ExportToPdf(dtPDF);
}
}
public void ExportToPdf(DataTable myDataTable)
{
Document pdfDoc = new Document(PageSize.A4, 10, 10, 10, 10);
try
{
PdfWriter.GetInstance(pdfDoc, System.Web.HttpContext.Current.Response.OutputStream);
pdfDoc.Open();
Chunk c = new Chunk("" + System.Web.HttpContext.Current.Session["CompanyName"] + "", FontFactory.GetFont("Verdana", 11));
Paragraph p = new Paragraph();
p.Alignment = Element.ALIGN_CENTER;
p.Add(c);
pdfDoc.Add(p);
string clientLogo = Server.MapPath(".") + "/logo/tpglogo.jpg";
string imageFilePath = Server.MapPath(".") + "/logo/tpglogo.jpg";
iTextSharp.text.Image jpg = iTextSharp.text.Image.GetInstance(imageFilePath);
//Resize image depend upon your need
jpg.ScaleToFit(80f, 60f);
//Give space before image
jpg.SpacingBefore = 0f;
//Give some space after the image
jpg.SpacingAfter = 1f;
jpg.Alignment = Element.HEADER;
pdfDoc.Add(jpg);
Font font8 = FontFactory.GetFont("ARIAL", 7);
DataTable dt = myDataTable;
if (dt != null)
{
//Craete instance of the pdf table and set the number of column in that table
PdfPTable PdfTable = new PdfPTable(dt.Columns.Count);
PdfPCell PdfPCell = null;
for (int rows = 0; rows < dt.Rows.Count; rows++)
{
for (int column = 0; column < dt.Columns.Count; column++)
{
PdfPCell = new PdfPCell(new Phrase(new Chunk(dt.Rows[rows][column].ToString(), font8)));
PdfTable.AddCell(PdfPCell);
}
}
//PdfTable.SpacingBefore = 15f; // Give some space after the text or it may overlap the table
pdfDoc.Add(PdfTable); // add pdf table to the document
}
pdfDoc.Close();
Response.ContentType = "application/pdf";
Response.AddHeader("content-disposition", "attachment; filename= SampleExport.pdf");
System.Web.HttpContext.Current.Response.Write(pdfDoc);
Response.Flush();
Response.End();
//HttpContext.Current.ApplicationInstance.CompleteRequest();
}
catch (DocumentException de)
{
System.Web.HttpContext.Current.Response.Write(de.Message);
}
catch (IOException ioEx)
{
System.Web.HttpContext.Current.Response.Write(ioEx.Message);
}
catch (Exception ex)
{
System.Web.HttpContext.Current.Response.Write(ex.Message);
}
}

Why is part of the image cut out when taking a picture with this code on Blackberry?

When I take a picture on the simulator (Haven't tried a device yet) the result is only less than half of the image and the rest is gray. Does anyone know why?
Thanks
listener = new FileSystemJournalListener()
{
private long _lastUSN;
public void fileJournalChanged()
{
long nextUSN = FileSystemJournal.getNextUSN();
FileSystemJournalEntry entry = FileSystemJournal.getEntry(nextUSN - 1);
nextUSN++;
switch (entry.getEvent()) {
case FileSystemJournalEntry.FILE_ADDED:
try
{
FileConnection fconn = (FileConnection)Connector.open("file://" +entry.getPath());
if(fconn.exists())
{
InputStream input = null;
input = fconn.openInputStream();
byte[] data = new byte[(int) fconn.fileSize() + 1000];
input.read(data);
rawImage = data;
pic = Bitmap.createBitmapFromBytes(data, 0, -1, 1);
if(input != null)
{
input.close();
}
Bitmap[] images = new Bitmap[1];
images[0] = pic;
//labels[1] = "Label for image 2";
// tooltips[1] = "Tooltip for image 2";
// labels[2] = "Label for image 2";
// tooltips[2] = "Tooltip for image 2";
ScrollEntry[] entries = new ScrollEntry[images.length];
entries[0] = new ScrollEntry(images[0], "", "");
PictureScrollField pictureScrollField = new PictureScrollField(175, 131);
pictureScrollField.setData(entries, 0);
pictureScrollField.setHighlightStyle(HighlightStyle.ILLUMINATE_WITH_SHRINK_LENS);
// pictureScrollField.setHighlightBorderColor(Color.BLUE);
pictureScrollField.setBackground(BackgroundFactory.createSolidTransparentBackground(Color.BLACK, 150));
insert(pictureScrollField, 1);
picTaken = true;
EventInjector.KeyEvent inject = new EventInjector.KeyEvent(EventInjector.KeyEvent.KEY_DOWN, Characters.ESCAPE, 0, 50);
inject.post();
inject.post();
}
break;
}
catch (Exception e)
{
// TODO Auto-generated catch block
Dialog.alert(e.toString());
}
//either a picture was taken or a picture was added to the BlackBerry device
case FileSystemJournalEntry.FILE_DELETED:
//a picture was removed from the BlackBerry device;
break;
}
input.read(data) only reads some amount of data, not all of it. If you want to read the whole file, use IOUtilities.streamToBytes(input); instead, like this:
byte[] data = IOUtilities.streamToBytes(input);
byte[] data = new byte[(int) fconn.fileSize() + 1000];
...
pic = Bitmap.createBitmapFromBytes(data, 0, -1, 1);
I think data now contains last wrong 1000 bytes, try changing to:
byte[] data = new byte[(int) fconn.fileSize()];
I faced the same problem. Just use:
synchronized(UiApplication.getEventLock()) {
//your code here
}

Resources