File selection, image installation and downloading without blocking the user interface

Question

Problem

I can successfully complete the following steps, but the user interface may stop responding to files of 2 MB or more. These files are in the size range of what the user can download from the camera or on the desktop, so I will need to process them.

• A user uploads a file using a standard HTML input element:

  <input class="cancel" type="file" name="userFile" id="userFile" accept="image/*"/>

• On the client side, I resize the file so that the width is 500 pixels or less (in particular, to reduce the image size for large files) and show the image.

• On the client side, I upload a file with a reduced size.

Demo

See this fiddle .

There you can see that - stops moving when downloading large files. The delay seems more significant in Chrome than Firefox, but it is still noticeable in Firefox.

Reason for blocking

• When the url of the file data is set to img src. This is necessary to resize the image on the canvas.

  img.src = e.target.result;//blocking here

• When img is written to the canvas. This is necessary to resize the image.

  ctx.drawImage( img, 0, 0, width, height );//blocking here

The options that I reviewed

• Performing a blocking action on a web worker. This is not possible because web workers cannot manipulate DOM elements, and blocking calls occur when manipulating the DOM.

• Resize raw image data in a web desktop. Unfortunately, I do not know which img format will be changed in this way; I have to process all types of images. I don’t know of any JavaScript library that will do this, and I don’t really want to write my own compressed format compression library.

• Resizing img directly, but this does not change the base size of the data to be loaded.

• Performing a resize on the server is not an option because I want to reduce the download size. Resizing on the client is also better, since memory for a large image is issued earlier, and a resized image is displayed immediately.

Other thoughts

I know that installing img src is asynchronous, so I assume that this is copying the data causing the lock. I wonder if there is a way to share the same data, and not make a copy?

I use what, in my opinion, is the standard approach to using FileReader to get the data url, and then sets the data url for img.src and canvas.drawImage to resize (there are many examples of this: one here ) . Any help in improving the response to this approach or another approach will be appreciated.

Answer 1

I assume that you are trying to do the following

• User uploads image.
• The client displays an image with reduced quality for the user.
• The client then uploads the reduced image quality to your server for later use.

The problem you are facing is that you force javascript (client) to do what will be best done on the server side. Regarding displaying a lower resolution image that can be easily achieved using drawImage . There is no reason for the user to display the actual reduced file immediately on the client side. Here is my version of your usage stream.

• User uploads image.
• The client uploads it to the server, showing a reduced resolution version using drawImage.
• The server runs the script in the same way as one , resizing it to the required size.
• Then, when the image is to be used in the future, the server coughs the version with the modified version.

Hope this helps !!!