I'm working on developing a unique gradient selection application. One of the exciting features I would like to incorporate is the ability for users to save their chosen gradients as digital images (.jpg format) directly onto their computers. When the user clicks a specific button, the application should capture a div element that is styled with a linear-gradient property and enable them to save it using a classic "Save As" popup modal. Despite numerous attempts at various solutions and examples, I have been unsuccessful in achieving this functionality thus far. Therefore, I am seeking guidance on the easiest way to accomplish this task solely by utilizing plain JavaScript, without relying on jQuery or any other external libraries. To provide some contextual reference, please see the image below:
HTML structure:
<div class="gradient-div" id="gradient-div">CSS styling:
background: linear-gradient(90deg, #4CA1AF, #C4E0E5);*The height of the div has been set to 100vh for the sole purpose of allowing the user to generate pictures with the highest possible resolution. Additionally, the navigation bar from the provided image has its position set to fixed.
In the JavaScript functionality, adjustments are made to the orientation and color of the gradient.