You are viewing a plain text version of this content. The canonical link for it is here.

Posted to users@flex.apache.org by "Erik J. Thomas" <er...@linqto.com> on 2017/04/24 18:45:50 UTC

Slow Image Sizing

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

Re: Slow Image Sizing

Posted by "Erik J. Thomas" <er...@linqto.com>.

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 <bi...@gmail.com> 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 <gr...@gmail.com> 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 <er...@linqto.com> 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
>>> 
>>> 
>>

Re: Slow Image Sizing

Posted by OmPrakash Muppirala <bi...@gmail.com>.

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 <gr...@gmail.com> 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 <er...@linqto.com> 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
> >
> >
>

Re: Slow Image Sizing

Posted by "Erik J. Thomas" <er...@linqto.com>.

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 <gr...@gmail.com> 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 <er...@linqto.com> 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
>> 
>>

Re: Slow Image Sizing

Posted by Greg Dove <gr...@gmail.com>.

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 <er...@linqto.com> 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
>
>