2

I have a site that is built in .net with a SqlServer database. We are a marketplace were users upload images and product descriptions. Some customers experience problems with uploading images. When we ask them to upload only one small photo it will work. If we could shrink the file size before it was sent to the server I think it would help a lot. I would like to be able to keep the image large and just shrink it for when it is sent. Can anyone point me in the right direction on this?

Tyler Jensen
  • 69
  • 1
  • 9

2 Answers2

1

There are a couple of ways to achieve what you want with javascript

  • The user crops the image in the UI (using a plugin)
  • You resize the selected file with javascript to a predefined dimension drawing the image on a canvas (read this article, explains a lot about this)
  • Process the image in a canvas and then simply decrease the quality of the image (the second parameter of toDataURL method of the canvas, read more about toDataURL here)

You need to manipulate in all the previous options, images in base64 format. To save them in your server execute a post submit in a form with a field that contains the base64 string and then process it in your server.

Community
  • 1
  • 1
Carlos Delgado
  • 2,552
  • 4
  • 20
  • 42
  • Thank you. I will try the last one. I would like to decrease the quality but not too the point the customers notice. Hopefully this will help. – Tyler Jensen Mar 16 '16 at 16:03
0

You can limit the amount of filetypes that users upload, stick to highly compressed image formats like jpeg. That will ensure smallest filesize.

I don't think there is any way javascript could clientside compress raw images before transfer. But you could use <canvas> for drag and drop and then scale and save the image in jpeg before posting to the server.

Brunis
  • 975
  • 7
  • 11