Tag Archives: Images

Adding auto-zoom feature to Android-Image-Cropper

In this post I will describe the work I did to add auto-zoom functionality to Android-Image-Cropper library.
The goal is a smooth zoom-in/out experience affected by the size of the cropping window. When the user adjusts the crop window to cover less than 50% of the image current total visible sub-area, auto-zoom-in is triggered to zoom-in and center on the relevant cropping image zoomed sub-area so the crop window will cover 64% of it. Similarly, when the crop rectangle is above 65% auto-zoom-out is triggered so zoomed sub-area will be 51% covered.
 
Steps:

  1. Using matrix scale type for the cropping image in image view .
  2. Handle image rotation via matrix transformation.
  3. Adding auto-zoom-in/out to matrix transformation.
  4. Smoothing transitions using animations.
  5. Cropping using invert matrix transformation.

 

Result:

result.gif
Continue reading →

Android Image Cropper async support and custom progress UI

It's embarrassing really, soon after creating my Android-Image-Cropper fork as I wrote about in my previous post, a GitHub user noted that I have a slowness issue caused by loading/decoding image URI on main thread potentially causing an ANR, really a newbie mistake.
Unfortunately starting a new startup I didn't have the time to fix it then, and no one come forward with a pull request. Fortunately the company is more mature now so I can commit a bit of my free time for the project.
 
What we will have here:

  • A few words on the implementation.
  • Using setImageUriAsync and getCroppedImageAsync.
  • Handling OnSetImageUriComplete and OnGetCroppedImageComplete listeners.
  • Overriding default progress bar UI using showProgressBar view attribute and listeners.

 
TL;DR See the gist.
Continue reading →

Android cropping image from camera or gallery

Recently I needed to implement avatar image upload from an Android app, I didn't found a library that did all that I needed so I forked a pretty good one and made it better, check it out: Android Image Cropper.
 
See also the followup post: Android Image Cropper async support and custom progress UI.
 

Requirements:

  • Pick image from camera or gallery using single chooser.
  • Select circular crop window in the image for the avatar.
  • Limit output avatar image to 500×500 pixels.
  • Efficient memory usage.

Continue reading →

Generate image from HTML using HTML Renderer

The requirement to generate image from HTML snippet appears to be quite popular, as seen in a few StackOverflow questions1, so I have decided to properly support it in HTML Renderer to simplify the process and improve the results.
 
The support for image generation in HTML Renderer existed since day one, but it required manual handling of image graphics object, size limitations and configuration toggles.
Additionally the change to use GDI text rendering in 1.4.6.0 broke2 the most common code used for generating image with HTML Renderer, as provided in several blogs and StackOverflow answers3.

Continue reading →

Optimizing images usage in .NET – part 1

Using image is an integral part of GUI application but I have found very little resources on it's resource consumption and how I can optimize it. The goal of this post is exactly that, in part 1 I will show the performance impact and in part 2 I will propose an optimization.
I'm going to consider only the memory usage as CPU performance is generally insignificant.
 
Continue reading →

Using T4 Templates for caching image resources

In my project I'm doing a lot of native UI rendering1, soon I will blog on why.
Naturally I have many images to render using DrawImage methods, that requires an Image instance.
There are couple of ways to load an image but the best2 and easies option is using a Resource File, just dragging and dropping the images into the resource designer will add the file to the project and generate a nice static property by the name of the file in the static class generated by the name of the resource file.
The problem is that each time image resource property is called a new image instance is created with the requested image, so if the same image is used in multiple places3 it will be loaded multiple times in memory4.
 
Continue reading →