Crop image from uInt8List Flutter - image

i an developing an tool for publish image like instagram,
the problem is that i want to cut the image and send to server square, my problem is that t can not cut the image sqaure from the original image, i have a uInt8List from my image.
how can i cut my image?

I wrote an extension on Face from Firebase's Vision Api, it returns you the image bytes data which you can just plug into your Image.memory widget.
Forget to mention you need the image library :
- https://pub.dev/packages/image
extension FaceExtension on Face {
Future<Uint8List> getFaceFromImage(File imageFile) async {
final image = await imageFile.readAsBytes();
final decodedImage = decodeImage(image);
final rectangle = this.boundingBox;
final face = copyCrop(
decodedImage,
rectangle.topLeft.dx.toInt(),
rectangle.topLeft.dy.toInt(),
rectangle.width.toInt(),
rectangle.height.toInt(),
);
return Uint8List.fromList(encodePng(face));
}
}

Related

Xamarin Forms Convert from Image to Base64 from Image Control not from file

I am loading an image from the camera into an Image control. That works beautifully as shown below.
var photo = await Plugin.Media.CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions() { });
if (photo != null)
PhotoImageRear.Source = ImageSource.FromStream(() => { return photo.GetStream(); });
I sometime later need to take the images loaded into that PhotoImageRear control and convert it to a base64 string in order to post it to an API.
What would be the most efficient way of achieving that.
Thanks in advance for your help
From shared code ,once you get the photo, you can use the following code to convert to Base64 .
var stream = photo.GetStream();
var bytes = new byte [stream.Length];
await stream.ReadAsync(bytes, 0, (int)stream.Length);
string base64 = System.Convert.ToBase64String(bytes);

what are the major differences between image asset and bitmap factory plugin

I'm trying to resize my image size before uploading it to server. I got to know that one can resize the image by keeping its aspect ratio using image asset. Though the image size was reduced the quality is very poor, and one more option i found is bitmap factory.
So, by using bitmap does the image quality is better than using image asset. kindly clarify this. Since the plugin is giving lot of errors currently. i don't want to waste time solving those if i don't get better quality images.
When it comes to resizing the image, both image-asset module and bitmap factory plugin does the same job.
Apart from resizing, the bitmap factory plugin also allows you to draw objects / write text over image. I'm not sure how it makes you a difference with image quality, but if you check the code it is almost the same for resizing.
I tried with both image resizing, and i don't know why i see some
better quality image from bitmap than image asset
. you can check yourself with this below code.
For Bitmap
let w = imageSourceModule.fromFile(img).width;
let h = imageSourceModule.fromFile(img).height;
var bmp = BitmapFactory.create(w, h);
const asset_1 = new ImageAsset(img);
imageSourceModule.fromAsset(asset_1)
.then(img_1 => {
bmp.dispose(function (b) {
b.insert(BitmapFactory.makeMutable(img_1));
// ## Max dimension. Respects aspect ratio.
var b2 = b.resizeMax(250);
var thumb_image = b2.toImageSource();
console.log("-----thumb_image------");
console.log(thumb_image);
if (thumb_image) {
console.log("bit map File successfully deleted....!");
thumb_image.saveToFile(pathDest_1, "jpg");
}
});
})
For Image Asset
const asset = new ImageAsset(img);
asset.options = {
width: 250,
height: 250,
keepAspectRatio: true,
autoScaleFactor: true,
};
imageSourceModule.fromAsset(asset)
.then(img => {
img.saveToFile(pathDest, "jpg");
})

Unity - Loading image using www cause all images in application to change

I am pretty new to Unity, so this might be an easy one.
I am trying to load and image from a URL an into an image in my application. In my application I have many different images, but for some reason all the images change to the image loaded from my url.
I have made a component called LoadImage and added it only to the one image I want to change. My code for loading the image looks like this:
public class LoadImage : MonoBehaviour
{
public Image img;
// Use this for initialization
void Start ()
{
DownloadViaURL();
}
void DownloadViaURL()
{
Debug.Log("Called DownloadViaURL");
FirebaseDatabase.DefaultInstance
.GetReference("Child1").Child("Child2").Child("ImageURL")
.GetValueAsync().ContinueWith(task =>
{
Debug.Log("Default Instance entered");
if (task.IsFaulted)
{
Debug.Log("Error retrieving data from server");
}
else if (task.IsCompleted)
{
DataSnapshot snapshot = task.Result;
string data_URL = snapshot.GetValue(true).ToString();
//Start coroutine to download image
StartCoroutine(AccessURL(data_URL));
}
});
}
IEnumerator AccessURL(string url)
{
using (WWW www = new WWW(url))
{
yield return www;
www.LoadImageIntoTexture(img.mainTexture as Texture2D);
Debug.Log("Texture URL: " + www.url);
}
}
}
And I have then added the image as the public Image img;
Can anyone tell my why unity load the image into all imageviews in my application instead of just the one?
You say
I have many different images,
but I guess you mean different Image components where you very probably referenced the same texture from your assets multiple times
So what your code actually does is overwriting whatever texture asset is referenced by your image => it is also changed in all other images/materials etc that reference the same texture asset.
You should rather create a new texture, load the data into it and change the image's texture reference:
// Create new texture
// Size values don't matter because texture will be overwritten
var newTexture = new Texture2D(2,2);
// Load image I new texture
www.LoadImageToTexture(newTexture);
// Use the reference to that new texture
img.mainTexture = newTexture;

How to get Resized/Thumbnail Image : UWP

Currently I was working on a UWP application. I captured the ink strokes into an image. Now the same image need to display as a preview. So the original image need to re-size to shorter size or thumbnail need to be generated.
I tried with using the larger image directly as a source to shorter sized image canvas --> not working (visible image quality degrade)
I also used Transcode of image programatically --> same result as above
I test with the same image. Re-sized the same image using paint, and there interestingly the quality of the re-sized image remains good.
Please help me to solve the issue I faced.
I not sure, need to see some code, but could be how you are saving the image? Here an example:
try
{
Windows.Storage.Pickers.FileSavePicker save = new Windows.Storage.Pickers.FileSavePicker();
save.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.Desktop;
save.DefaultFileExtension = “.png”;
save.FileTypeChoices.Add(“PNG”, new string[] { “.png” });
StorageFile filesave = await save.PickSaveFileAsync();
using (IOutputStream fileStream = await filesave.OpenAsync(FileAccessMode.ReadWrite))
{
if (fileStream != null)
{
await m_InkManager.SaveAsync(fileStream);
}
}
}
catch (Exception ex)
{
var dialog = new MessageDialog(ex.Message);
dialog.ShowAsync();
}
I will post a great tutorial of Can Bilgin that explain perfectly all about inking.
Drawing / Inking API in WinRT (C#) – I
Drawing / Inking API in WinRT (C#) – II
Drawing / Inking API in WinRT (C#) – III

HTML5 FileReader API in iPhone5 not getting photo from camera

I'm building a mobile website which lets users upload photos from their camera.
I can get images from the users albums, and I can get images when the user takes a photo in iOS6 on iPhone4 and Android 4, but when the user takes a photo with an iPhone5 (also using iOS6), I get nothing. I can get the image from the users photo albums, but not when taking a photo.
here's the code and jsfiddle below
$('input#file_api').change(function(evt){
var image = evt.target.files[0];
var reader = new FileReader();
reader.onerror = (function(){alert('error reading file')});
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function(){
var canvas = document.createElement('canvas');
canvas.width=tempImg.width;
canvas.height=tempImg.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(tempImg,0,0);
$('body').append(canvas);
})(image);
reader.readAsDataURL(image);
I've got an example here http://jsfiddle.net/8DJUy/4/
If you use the file picker to get a photo, it will append the photo to the page.
If you take a photo with an iPhone5, it won't append anything. But at the same time, it doesn't error out either.
Any suggestions on how to get around this?
I can't quite figure out what the problem is with grabbing the photo.
The reason I'm grabbing the photos like this is that the file sizes are quite large when uploaded directly from the phone, and the use case does not require high resolution images, so I'm using the canvas to resize the image before uploading it.
Try this instead:
ctx.drawImage(tempImg, 0, 0, canvas.width, canvas.height);

Resources