OpenESignForms / openesignforms

Open eSignForms is the first open source SaaS web contracting platform
https://open.esignforms.com
107 stars 50 forks source link

Photo upload rotation and file size reduction #166

Closed LeslieStrom closed 8 years ago

LeslieStrom commented 8 years ago

My customer uses iPad for taking pictures for insurance incidents. Right now, I've added a photo upload field and set the image size (in the html) to 400 pixels wide. The photographs in the html version are sometimes rotated 180 or 90 degrees. The photographs in the pdf are also. The files sizes are full sized and will be taking up a LOT of server space once they get using this feature. I'd like to have the file sizes of the photographs reduce for storage.

I also have selected the option of having the photographs attach to the emails that go out at the end of the transaction; Ideally these would be full size for readability and not stored in the system. The reduced size ones would be stored.

OpenESignForms commented 8 years ago

Most likely if we accept a larger image file and reduce it for storage, that save image would be used in any documents and emails sent out. We cannot both not store the bigger image and send the bigger image.

The file upload image size restrictions are for display only (using CSS max-width) to ensure a large image does not completely alter the layout of the document.

As for rotating images, this requires that the image uploaded be in the right rotation to begin with as few web browsers will rotate an image (we've seen Safari in iOS do this, but even it doesn't seem to do it in the Mac version). In general, this means holding the ipad/iphone in landscape mode, with the camera lens at the top -- usually a quarter turn counter-clockwise when holding it normally in portrait mode.

We will investigate a way to allow uploaded images to be rotated and perhaps reduced in size before storage. Only this altered/modified image will be stored and used throughout.

OpenESignForms commented 8 years ago

We have added options to the File Upload field template that allow for resizing the uploaded image to the max-width setting. As it is now, the image is uploaded "as is" and then is resized in the display. With this new feature, the uploaded image is resized to the max-width and the original is not stored. The resize also rotates to the correct orientation, so it should work with iphone/ipad image uploads. Note that if the resized image is not smaller than the original, the original will be used (and no rotation/orientation will take place).

LeslieStrom commented 8 years ago

Here are the dropdown options; I'm not sure what the difference is between "Show Images" and "Only Images." dd

OpenESignForms commented 8 years ago

We tested on an iPhone 6 and noted that all 4 orientations of the camera were rotated correctly. Of course the actual image size is controlled by the camera resolution, but the basic idea should always hold true.

Here are the stored image sizes in our test:

Regular portrait image upload: 1200KB Regular landscape upload: 1300KB

Resize max-width 200 portrait image upload: 6.2KB Resize max-width 200 landscape upload: 6.6KB

Resize max-width 400 portrait image upload: 17.6KB Resize max-width 400 landscape upload: 18.7KB

Resize max-width 600 portrait image upload: 34KB Resize max-width 600 landscape upload: 35.2KB

Resize max-width 800 portrait image upload: 53.3KB Resize max-width 800 landscape upload: 54.6KB

OpenESignForms commented 8 years ago

"Only images" will reject an upload that is not a recognized image file (GIF/JPEG/PNG). The other will allow other files to be uploaded, too.

On the new release going in tonight or tomorrow, there will be one additional set of options in that dropdown for "Resize" which not only limits the display width, but actually resizes (and rotates the orientation) the images. Your case has been closed on this topic with the next release.

OpenESignForms commented 8 years ago

See https://github.com/OpenESignForms/openesignforms/wiki/ProgrammingGuide#fields

Not updated for the resize images yet, but it says:

"You can also set the Display format to use the default 'Standard: list of files' to have it list the uploaded files, or 'Show images: max-width ' so that non-image files are in a list, but image files are shown using the specified max-width in pixels, or 'Only images: max-width ' to block uploading non-image files (images are identified by their content/mime-type being a GIF, JPEG or PNG)."