HTML and JS to take a compressed picture with an overlay -- 2
Budget: $30 – $250 USD
Need a responsive HTML page with a button, following functionality should only apply to a mobile device view (width < 780px)
Once clicked the camera app should launch with an overlay frame, the overlay should include 2 buttons:
A 75% transparent camera icon should capture the picture once clicked.
The red button should close the camera app with the overly
Once a picture is taken a confirmation page should show the recently taken picture with an overlay asking for confirmation and an button for retake (see confirmation page)
Once the picture has been confirmed an asynchronous process should start compressing the picture on the client side and upload it to a digital ocean space. The application should be to capture the remaining pictures and display the confirmation page and asynchronously compress and upload all the pictures.
The application should be able to capture 5 photos with different header messages.
Once all 5 pictures have been captured the result page should show thumbnails of the pictures taken a red icon should indicate an upload failure and a blurry thumbnail with a sandbox icon should indicate the picture is currently being uploaded.
Desktop view should allow to upload a picture and compress it before uploading.
Compressed picture:
Max Size: 350KB
Quality: 90-95%
File type: .JPEG
Files expected:
HTML pages
Javascript files with libraries
Avoid angular or react. Only HTML and Javascript library files.
Once clicked the camera app should launch with an overlay frame, the overlay should include 2 buttons:
A 75% transparent camera icon should capture the picture once clicked.
The red button should close the camera app with the overly
Once a picture is taken a confirmation page should show the recently taken picture with an overlay asking for confirmation and an button for retake (see confirmation page)
Once the picture has been confirmed an asynchronous process should start compressing the picture on the client side and upload it to a digital ocean space. The application should be to capture the remaining pictures and display the confirmation page and asynchronously compress and upload all the pictures.
The application should be able to capture 5 photos with different header messages.
Once all 5 pictures have been captured the result page should show thumbnails of the pictures taken a red icon should indicate an upload failure and a blurry thumbnail with a sandbox icon should indicate the picture is currently being uploaded.
Desktop view should allow to upload a picture and compress it before uploading.
Compressed picture:
Max Size: 350KB
Quality: 90-95%
File type: .JPEG
Files expected:
HTML pages
Javascript files with libraries
Avoid angular or react. Only HTML and Javascript library files.