How to make "Download Background Image" button in JavaScript?

Question

I made a random background color generator in HTML/JavaScript. Now, I want to add "Download Background Image" button. But I don't know how.

Here is my code:

function randomBgColor() {
    var rmin = +rmintxt.value;
    var rmax = +rmaxtxt.value;
    var gmin = +gmintxt.value;
    var gmax = +gmaxtxt.value;
    var bmin = +bmintxt.value;
    var bmax = +bmaxtxt.value;
    var r = Math.floor(Math.random() * (rmax - rmin + 1) + rmin);
    var g = Math.floor(Math.random() * (gmax - gmin + 1) + gmin);
    var b = Math.floor(Math.random() * (bmax - bmin + 1) + bmin);
    var r2 = Math.floor(Math.random() * 255);
    var g2 = Math.floor(Math.random() * 255);
    var b2 = Math.floor(Math.random() * 255);
    var rhex = r.toString(16);
    var ghex = g.toString(16);
    var bhex = b.toString(16);
    var bgColor = "rgb(" + r + "," + g + "," + b + ")";
    var bgColor2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
    document.body.style.background = bgColor;
    rgb.innerHTML = "RGB: " + r + ", " + g + ", " + b;
    rgb.style.color = bgColor2.toString(16);
    hex.innerHTML = "Hex: #" + rhex.toUpperCase() + ghex.toUpperCase() + bhex.toUpperCase();
    hex.style.color = bgColor2.toString(16);
}

Show us what you've made and what part you get stuck. Without code there is not a lot we can do. — Emiel Zuurbier, Dec 21 '20 at 15:35
This needs clarification. What are you trying to "download?" An HTML file? Or do you mean just getting the HEX value of the color? Or some CSS? Unclear. — Lime, Dec 21 '20 at 15:36
Welcome to Stack Overflow! Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I also recommend Jon Skeet's [Writing the Perfect Question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) and [Question Checklist](https://codeblog.jonskeet.uk/2012/11/24/stack-overflow-question-checklist/). — T.J. Crowder, Dec 21 '20 at 15:36

score 2 · Accepted Answer · answered Dec 22 '20 at 01:40

I don't know why it doesn't work on StackOverflow, but on my computer it works well. Try to copy-paste and check it out.

var theCanva = document.querySelector('canvas');
var twoD = theCanva.getContext("2d");
var theBtn = document.querySelector('.btn');

function random_rgba() {
    var o = Math.round, r = Math.random, s = 255;            
    return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
}

twoD.width = window.innerWidth;
twoD.height = window.innerHeight;


var link = document.createElement('a');
link.innerHTML = 'Download';
link.addEventListener('click', function(ev) {
    link.href = theCanva.toDataURL("image/png");
    link.download = "test";
}, false);

theBtn.addEventListener('click', () => {
    var color = random_rgba();
    twoD.fillStyle = color;
    twoD.fillRect(0, 0, 1200, 800);
    document.body.appendChild(link);
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
canvas {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

<button class="btn">Generate random background color</button> 
<canvas></canvas>

score 0 · Answer 2 · answered Dec 21 '20 at 23:59

If you would like to have the button be able to have a file selector where you could make the page's background be the selected image, then you would need to have a file input, so that you can get the image that the user would like to use as a background to be displayed. In the JS, then you will need to create a variable to get the data of what the chosen file is. Now, you will need to have a conditional that checks if there even is a picture. So you can just do this:

if (/**Over here, you must check if the file exists and it is an image.**/) {
    //Over here, you would want to turn the page's background into the image.
}

But, you need to have a function, or else the whole thing will only run at the very start of the page's load. You need to add an event listener or something that checks when the file is chosen. If you don't know how to do that, then you can just search it up. Or, you could find something on Stack Overflow that relates to it. Like this:

How to check if input file is empty in jQuery

Hope this helps! If you have any further questions, please tell me. I am new on Stack Overflow, so I need to know how I can improve. Thanks!

How to make "Download Background Image" button in JavaScript?

2 Answers2