Slow Image Sizing

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Slow Image Sizing

Erik J. Thomas
Hey all:

My flex mobile app posts social chat messages with an optional image. It uses CameraRoll to allow the user to select any image on their phone. But modern phones take HUGE pics. We don't need full res photos for the chat and don't want to use up the bandwidth uploading full images and resizing on the server.

The API we hit accepts an octet stream of bytes that represents the file. All this functions fine, but it takes about 10 seconds to upload an HDR rear camera photo on an iPhone 6 Plus.

I'd like to resize it on the client. But using both PNG and JPG encoders are far too slow:

var bitmapData:BitmapData = new BitmapData(photo.width, photo.height, true, 0xffffff);
var jpegEncoder:JPEGEncoder = new JPEGEncoder();
urlRequest.data = jpegEncoder.encode(bitmapData); // this takes like 12 seconds for a 13 MB iPhone 6 photo.

So uploading is the better solution from a user experience perspective because UI can remain responsive while the async upload occurs. Resizing the image using an encoder cannot be done asynchronously so it blocks UI and we can do nothing but show a busy cursor.

I don't like either solution. Someone out there have any ideas?

Thanks.

Erik

Reply | Threaded
Open this post in threaded view
|

Re: Slow Image Sizing

Greg Dove
If JPEGEncoder is an actionscript encoder, you could switch to using the
native encoding support. It is much faster.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#encode()



On Tue, Apr 25, 2017 at 6:45 AM, Erik J. Thomas <[hidden email]> wrote:

> Hey all:
>
> My flex mobile app posts social chat messages with an optional image. It
> uses CameraRoll to allow the user to select any image on their phone. But
> modern phones take HUGE pics. We don't need full res photos for the chat
> and don't want to use up the bandwidth uploading full images and resizing
> on the server.
>
> The API we hit accepts an octet stream of bytes that represents the file.
> All this functions fine, but it takes about 10 seconds to upload an HDR
> rear camera photo on an iPhone 6 Plus.
>
> I'd like to resize it on the client. But using both PNG and JPG encoders
> are far too slow:
>
> var bitmapData:BitmapData = new BitmapData(photo.width, photo.height,
> true, 0xffffff);
> var jpegEncoder:JPEGEncoder = new JPEGEncoder();
> urlRequest.data = jpegEncoder.encode(bitmapData); // this takes like 12
> seconds for a 13 MB iPhone 6 photo.
>
> So uploading is the better solution from a user experience perspective
> because UI can remain responsive while the async upload occurs. Resizing
> the image using an encoder cannot be done asynchronously so it blocks UI
> and we can do nothing but show a busy cursor.
>
> I don't like either solution. Someone out there have any ideas?
>
> Thanks.
>
> Erik
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Slow Image Sizing

Erik J. Thomas
Hey Greg:

Thanks for the awesome tip. Never occurred to me to try this.

By just changing to use BitmapData.encode instead of JPEGEncoder.encode, it cut 95% of the processing time off. It's now coming in at under 200 ms to resize and encode a 13 MB HDR iPhone 6 Plus photograph to 800 pixels across. What a tremendous difference I'm amazed.

Problem solved! You rock!

Thanks!!!

Erik

> On Apr 24, 2017, at 11:48 AM, Greg Dove <[hidden email]> wrote:
>
> If JPEGEncoder is an actionscript encoder, you could switch to using the
> native encoding support. It is much faster.
>
> http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#encode()
>
>
>
> On Tue, Apr 25, 2017 at 6:45 AM, Erik J. Thomas <[hidden email]> wrote:
>
>> Hey all:
>>
>> My flex mobile app posts social chat messages with an optional image. It
>> uses CameraRoll to allow the user to select any image on their phone. But
>> modern phones take HUGE pics. We don't need full res photos for the chat
>> and don't want to use up the bandwidth uploading full images and resizing
>> on the server.
>>
>> The API we hit accepts an octet stream of bytes that represents the file.
>> All this functions fine, but it takes about 10 seconds to upload an HDR
>> rear camera photo on an iPhone 6 Plus.
>>
>> I'd like to resize it on the client. But using both PNG and JPG encoders
>> are far too slow:
>>
>> var bitmapData:BitmapData = new BitmapData(photo.width, photo.height,
>> true, 0xffffff);
>> var jpegEncoder:JPEGEncoder = new JPEGEncoder();
>> urlRequest.data = jpegEncoder.encode(bitmapData); // this takes like 12
>> seconds for a 13 MB iPhone 6 photo.
>>
>> So uploading is the better solution from a user experience perspective
>> because UI can remain responsive while the async upload occurs. Resizing
>> the image using an encoder cannot be done asynchronously so it blocks UI
>> and we can do nothing but show a busy cursor.
>>
>> I don't like either solution. Someone out there have any ideas?
>>
>> Thanks.
>>
>> Erik
>>
>>

Reply | Threaded
Open this post in threaded view
|

Re: Slow Image Sizing

OmPrakash Muppirala
In reply to this post by Greg Dove
If it is for a chat avatar, will a thumbnail work?
Every image file has a thumbnail image embedded in the file's metadata
section.  You could simply read the necessary bytes and upload/display
them.

I have used this as3 library in the past and it works quite well:
https://github.com/bashi/exif-as3

Thanks,
Om

On Mon, Apr 24, 2017 at 11:48 AM, Greg Dove <[hidden email]> wrote:

> If JPEGEncoder is an actionscript encoder, you could switch to using the
> native encoding support. It is much faster.
>
> http://help.adobe.com/en_US/FlashPlatform/reference/
> actionscript/3/flash/display/BitmapData.html#encode()
>
>
>
> On Tue, Apr 25, 2017 at 6:45 AM, Erik J. Thomas <[hidden email]> wrote:
>
> > Hey all:
> >
> > My flex mobile app posts social chat messages with an optional image. It
> > uses CameraRoll to allow the user to select any image on their phone. But
> > modern phones take HUGE pics. We don't need full res photos for the chat
> > and don't want to use up the bandwidth uploading full images and resizing
> > on the server.
> >
> > The API we hit accepts an octet stream of bytes that represents the file.
> > All this functions fine, but it takes about 10 seconds to upload an HDR
> > rear camera photo on an iPhone 6 Plus.
> >
> > I'd like to resize it on the client. But using both PNG and JPG encoders
> > are far too slow:
> >
> > var bitmapData:BitmapData = new BitmapData(photo.width, photo.height,
> > true, 0xffffff);
> > var jpegEncoder:JPEGEncoder = new JPEGEncoder();
> > urlRequest.data = jpegEncoder.encode(bitmapData); // this takes like 12
> > seconds for a 13 MB iPhone 6 photo.
> >
> > So uploading is the better solution from a user experience perspective
> > because UI can remain responsive while the async upload occurs. Resizing
> > the image using an encoder cannot be done asynchronously so it blocks UI
> > and we can do nothing but show a busy cursor.
> >
> > I don't like either solution. Someone out there have any ideas?
> >
> > Thanks.
> >
> > Erik
> >
> >
>
Reply | Threaded
Open this post in threaded view
|

Re: Slow Image Sizing

Erik J. Thomas
Thanks, Om, but it's not for thumbnails. I will look at the library though at some point, but our current issues are solved.

Erik

> On Apr 24, 2017, at 2:23 PM, OmPrakash Muppirala <[hidden email]> wrote:
>
> If it is for a chat avatar, will a thumbnail work?
> Every image file has a thumbnail image embedded in the file's metadata
> section.  You could simply read the necessary bytes and upload/display
> them.
>
> I have used this as3 library in the past and it works quite well:
> https://github.com/bashi/exif-as3
>
> Thanks,
> Om
>
> On Mon, Apr 24, 2017 at 11:48 AM, Greg Dove <[hidden email]> wrote:
>
>> If JPEGEncoder is an actionscript encoder, you could switch to using the
>> native encoding support. It is much faster.
>>
>> http://help.adobe.com/en_US/FlashPlatform/reference/
>> actionscript/3/flash/display/BitmapData.html#encode()
>>
>>
>>
>> On Tue, Apr 25, 2017 at 6:45 AM, Erik J. Thomas <[hidden email]> wrote:
>>
>>> Hey all:
>>>
>>> My flex mobile app posts social chat messages with an optional image. It
>>> uses CameraRoll to allow the user to select any image on their phone. But
>>> modern phones take HUGE pics. We don't need full res photos for the chat
>>> and don't want to use up the bandwidth uploading full images and resizing
>>> on the server.
>>>
>>> The API we hit accepts an octet stream of bytes that represents the file.
>>> All this functions fine, but it takes about 10 seconds to upload an HDR
>>> rear camera photo on an iPhone 6 Plus.
>>>
>>> I'd like to resize it on the client. But using both PNG and JPG encoders
>>> are far too slow:
>>>
>>> var bitmapData:BitmapData = new BitmapData(photo.width, photo.height,
>>> true, 0xffffff);
>>> var jpegEncoder:JPEGEncoder = new JPEGEncoder();
>>> urlRequest.data = jpegEncoder.encode(bitmapData); // this takes like 12
>>> seconds for a 13 MB iPhone 6 photo.
>>>
>>> So uploading is the better solution from a user experience perspective
>>> because UI can remain responsive while the async upload occurs. Resizing
>>> the image using an encoder cannot be done asynchronously so it blocks UI
>>> and we can do nothing but show a busy cursor.
>>>
>>> I don't like either solution. Someone out there have any ideas?
>>>
>>> Thanks.
>>>
>>> Erik
>>>
>>>
>>