Question

我有一个JavaScript生成器，输出黑色，灰色和白色方块。如何在网页上右键单击并保存生成图像的图像？

HTML ＆LT;按钮onclick =＆＃34; run（）＆＃34;＆gt;生成＆lt; /按钮＆GT;

function run() {

var x = document.getElementById("block");
if (x) {
    x.parentNode.removeChild(x);
}

var rows = 20;
var cols = 20;
var size = 30;

var container = document.createElement("div");
container.id = "block";

for (var i = 0, len = rows * cols; i < len; i++) {
    x = document.createElement("div");
    x.className = "cell";
    x.style.height = size + "px";
    x.style.width = size + "px";
    x.style.backgroundColor = pickColor();
    container.appendChild(x);
}
document.body.appendChild(container);
}
function pickColor(){
var colorArray = ["black", "grey", "white"];
return colorArray[Math.floor(Math.random() * colorArray.length)];
}
window.onload = run;

Answer 1

您可以使用HTML2Canvas生成网页的客户端图片（或部分图片，例如您的块元素container）。

html2canvas(container, { 
  onrendered: function(canvas) {
    var img_data_url = canvas.toDataURL("image/png");
    document.body.innerHTML += '<img src="' + img_data_url + '"/>';
  }
});

以上代码会在您生成的HTML的img标记中生成图像（并将其附加到您的身体）。然后，用户可以单击“另存为”以保存图像，就像他通常那样。

Javascript - 在网页上保存图片

1 个答案: