0

For the past couple of days I have been looking for a way to send a string from the client to Node, with no luck.

At the moment, I have a form with a dozen inputs and an image cropping tool (fengyuanchen/cropper) that will have the user upload a photo, edit (resize, crop, etc...) and save the dataURL (data:image/png;base64,iVBORw0KGg[...]) in a variable. The form inputs I don't have an issue with, they're updating in the database just fine. I'm having issues passing the variable containing the dataURL.

Ideally, I would like to have just one form that the user submits that will 1) update the database with the input fields and 2) pass the canvas dataURL to node, decode, save the image in the server, and add an entry in MySQL. Either that or use AJAX to submit the cropped photo separately without erasing modifications to the input fields.

From SO question: Save canvas data to file. The chosen answer assumes "you already know how to POST that string from the browser to your Nodejs server." That's the part I'm stuck on.

I've read about possibly using: 1) hidden form fields - would this be possible/performant? 2) Node's module loader 3) Require.js 4) socket.emit('image', dataURL)

I've re-sized the image to 1024x360 so as to keep the dataURL as short as possible with a decently looking photo until I find a better solution. Still, these dataURLs end up quite large (I've seen some as large as 700,000 characters). Would I be able to send the data through JSON?

Any help would be greatly appreciated.

Community
  • 1
  • 1
Mark
  • 57
  • 1
  • 2
  • 11
  • Is there a reason why you arent uploading the image via FormData instead of a base64 string? – Carsten Feb 02 '16 at 21:10
  • @Carsten Thank you for your comment and answer. The reason why I didn't use blobs is because I need to support IE9, the reason I didn't use FormData is because I need to pass a modified version of the canvas, in this case 'canvas.toBlob()'. Both issues solved by [blob polyfill](https://github.com/eligrey/Blob.js/) and [canvas.toBlob polyfill](https://github.com/eligrey/canvas-toBlob.js). However, I'd like to avoid polyfills if possible. I was thinking, maybe using Angular. – Mark Feb 04 '16 at 17:02
  • What about modifing your image on the server? – Carsten Feb 05 '16 at 12:19
  • There are great tool for modifing on the server (imagemagick, graphicsmagick) – Carsten Feb 05 '16 at 12:52
  • Or you could do it via third party services (Cloudinary...) – Carsten Feb 05 '16 at 12:53
  • @Carsten I'd love to modify the image on the server. As a matter of fact, initially, that was my plan, using [gm](http://aheckmann.github.io/gm/) (Node's graphicsmagick API), but I still need to know how to pass information from the client to node. For instance, the user might shift the image around, resize, or crop. I would need to be able to send this information to node so gm can edit the image accordingly. – Mark Feb 05 '16 at 17:23
  • @Carsten Also, due to the sensitive nature of the images and our company's policy, in order to use a third party service we would have to go through a lot of paperwork to add them as a vendor (and that's if they pass several screenings..), and then I would have to implement the system anyway. – Mark Feb 05 '16 at 17:28
  • Does the image cropper tool have possibility to get information about cropping, resizing? If yes you could pass it to the server – Carsten Feb 06 '16 at 19:30

1 Answers1

0

I recommend you to transform the base64 back to file on the client and then upload it via FormData. Since you have to transform it back on the server anyway

Convert base64 to file + append to FormData: Convert Data URI to File then append to FormData

Then use multer to fetch file from FormData

Community
  • 1
  • 1
Carsten
  • 326
  • 1
  • 2
  • 9