How to download only background of a page

Question

I am new with Web Development. I have created a single web page called "Background Generator" with html,css and javascript together. User can choose two colors or let random process to pick them. Then two colored background is displayed. The question is how can a user download only background that he/she created with a download button. Thanks for any help

EDIT

I have a single web page project that was an exercise in online Web Development course. We have created background by changing body.style.background property and set to "linear-gradient(to right, " + color1.value + ", " + color2.value + ")" color1 and color2 are picked by user. And my question comes, now user can see a styled two colored web page. I want user to be able to download the background that he/she has created as .png or .jpg , shortly as a picture. Thanks for any help

It's absolutely *not* obvious how you're creating that background exactly; how to download it hinges a lot on those details. — deceze, Dec 29 '18 at 22:25
@DDemirci No need to be rude. It really seems like you didn't read the [help] before posting. Just do yourself and everyone a favor and read the [help] so you can understand the guidelines before posting. :) — Charlie Fish, Dec 29 '18 at 22:27
I have a single web page project that was an exercise in online Web Development course. We have created background by changing body.style.background property and set to **"linear-gradient(to right, " + color1.value + ", " + color2.value + ")"** color1 and color2 are picked by user, so that is not a part of my question. And my question comes, now user can see a styled two colored web page, that's okay, I have done it. I want user to be able to download the background that he/she has created as .png or .jpg , shortly as a picture. I hope the explanation is clear for you now — DDemirci, Dec 29 '18 at 22:32
@CharlieFish I do not want to be rude to anybody but also no need to say to anyone who is beginner that do you want us to do your work :) I wonder the download issue and could not find helpful things by Google search — DDemirci, Dec 29 '18 at 22:36
You could do it if you draw the background into a `canvas`. There's no pure js, crossbrowser way to save the page to jpg. — Gabriel, Dec 30 '18 at 00:19

score 0 · Accepted Answer · edited Jan 02 '19 at 16:23

Maybe there is another solution, but I would draw the gradient within a CANVAS element, which can be downloaded using JavaScript (You can also do a "right-click" on the CANVAS element and click on "Save As" / "Graphic Save As" to download its content directly as PNG file).

Here is a example fiddle with the following code:

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
var gradient = context.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, "#ff0000");
gradient.addColorStop(1, "#0000ff");

context.fillStyle = gradient;
context.fillRect(0, 0, 400, 400);

document.querySelector("button").addEventListener("click", function(event){
    event.preventDefault();
    window.location.href = canvas.toDataURL("image/png");
});

Check out this MDN article about Canvas Gradients and this Stack Overflow Answer to see how you can save a Canvas to PNG.

How to download only background of a page

1 Answers1