1

In a web app I'm using Cropit to let the user upload and crop an image. Then I need to upload this image to the backend server.

Cropit returns the cropped image in Data URI format (type string).

My question is: what's the best way to now upload the cropped image to the backend server?

So far I've figured out two options here:

  1. Send the Data URI from the client as a simple string, then convert it to binary data on the server, and save the image to disk.

  2. Convert the Data URI to binary on the client and attach it to a FormData input, then send it to the server, and save the image to disk.

If I understand correctly, there's no native JS way to send Data URI as a multipart/form-data. Is this right?

Is it better (i.e. more performant / safer) to use approach 1 or 2? Or is preferable to do it in another way that I didn't mention?

Thanks!

Pensierinmusica
  • 6,404
  • 9
  • 40
  • 58

3 Answers3

4

The best way is to send the Data uri via a post method

I've found that the fastest most reliable method is to turn the image into a data uri.

With a multipart upload there could be issues sending the data and encoding the correct values, and it becomes a sticky mess. With the resources we havetoday a data URI is the best suggestion

Edit: Depending on the type of server you are using, it might be a smarter option to use multi-part upload. For example, an AWS lambda may only allow 5mb of data in the request. This would mean the best option would be to use a presigned URL with multi-part upload via S3, which should be handled via the frontend web portion.

Essentially the correct solution allows depends upon your architecture.

Travis Delly
  • 1,194
  • 2
  • 11
  • 20
0

As you told we can save data url as file by using server as well as we can save this in local using JavaScript by using below code

using PHP :

$uri_ = 'data://' . substr($uri, 5);
$binary = file_get_contents($uri_);

By JavaScript refer this github

Best way to do is If you want to give that file to download by user as soon as they done image editing then go for JavaScript method because it will run in client machine and creates file faster than server side.

If you want to save that file in server for next time use then create file using server side coding.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Amin Kodaganur
  • 646
  • 6
  • 19
0

Hope you are aware of issues using HTML5 canvas based image editing, for various images sizes, canvas size and the picture quality.

  1. As you mentioned using data format you can write the same to a file in the server side logic(as I am not sure about the server side technologies you use)
  2. Another approach could be use CLI tool image magic(http://www.imagemagick.org/) in the server side to process the image. ie, upload the file to server with the additional information to edit image, and process it at the server. For gathering edit information from client you can use any of the client side javascript libraries like (http://odyniec.net/projects/imgareaselect/)
Bijeshp009
  • 228
  • 2
  • 9
  • I did notice some issues with HTML5 canvas based image editing, could you please be more specific, or provide some links that describe the problem in detail? Thanks! – Pensierinmusica Nov 29 '15 at 09:13
  • 1
    Predominantly issues with down sampling : have a look at the following http://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas – Bijeshp009 Nov 30 '15 at 06:36