HTML/ JS/ Canvas - Edit dimension of an image before upload without base64

Question

I am using the following to upload and show a preview of an image before uploading the image.

var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

  oFReader.onload = function(oFREvent) {
    document.getElementById("uploadPreview").src = oFREvent.target.result;
  };


<img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">
  function PreviewImage() {
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

    oFReader.onload = function(oFREvent) {
      document.getElementById("uploadPreview").src = oFREvent.target.result;
    };
  };
</script>

How do I reliably edit the dimensions client-side before uploading the image? Is there any way to avoid uploading them as blobs? I don't want to store the image in the db, instead I want to store it as a file and keep a record of the path in the db.

possible duplicate of [Use HTML5 to resize an image before upload](http://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload) — fuzzybear, May 23 '15 at 15:38
@saj they are uploading as blob / base64. I don't want to save or process the file in base64. Is there any way around that? — blue_zinc, May 23 '15 at 15:52

markE · Accepted Answer · 2015-05-23T17:15:08.147

You really have multiple questions here.

(1) How to resize an image on the client-side.

You can use html5 canvas to resize the image on the client-side.

(2) How to transfer an image to the server.

A Blob and a Base64 string are the standard formats used to transfer image information from client to server. These formats are used for transport but the original image file format can be reconstituted on the server. There's no reason I know of to avoid using these standard formats for transfer purposes, even if you want the image to eventually be saved by the server as an image file (.png, .jpg, etc).

(3) How to save the Blob / Base64 string on the server as an image file.

Both Blobs and Base64 strings can be converted by the server into an image file (.png, .jpg, etc) and then can be saved on the server as a file.

The server can:

Accept incoming blob/base64 data:
Convert the incoming Blob/Base64 data into an image file format (.png, .jpg, etc)
Create a unique filename for the image file
Save the image file to storage
And put the filename in a database.

All of these questions have been answered multiple times on Stackoverflow.

You will find searching Stackoverflow will give you the answers you need.

Thanks for your detailed explanation. I was concerned about server responses being slow if too many images were being uploaded and it spent a lot of resources converting blob to image etc. For now, I will give this a go and if it doesn't seem to suit, I will ask a more specific optimization question. Thanks! — blue_zinc, May 23 '15 at 20:16

HTML/ JS/ Canvas - Edit dimension of an image before upload without base64

1 Answers1