Question

我是Web开发的新手。我用html，css和javascript创建了一个名为“ Background Generator”的网页。用户可以选择两种颜色，也可以通过随机处理来选择它们。然后显示两个彩色背景。问题是用户如何才能仅下载使用下载按钮创建的背景。感谢您的帮助

编辑

我有一个网页项目，这是在线Web开发课程中的练习。我们通过更改body.style.background属性创建了背景，并将其设置为“ linear-gradient（向右，” + color1.value +“，” + color2.value +“）”，然后由用户选择color1和color2。我的问题来了，现在用户可以看到带有样式的两种颜色的网页。我希望用户能够将他/她创建为.png或.jpg的背景不久地下载为图片。感谢您的帮助

Answer 1

也许还有另一种解决方案，但我会在CANVAS元素内绘制渐变，可以使用JavaScript下载该渐变（您也可以在CANVAS元素上进行“右键单击”，然后单击“另存为” /“图形另存为”，将其内容直接下载为PNG文件。

下面是一个示例fiddle，其中包含以下代码：

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");
});

查看this MDN article有关“画布渐变”和this Stack Overflow Answer的信息，以了解如何将Canvas保存为PNG。

如何仅下载页面背景

1 个答案: