在网页上保存图像

Javascript - Saving image on webpage

本文关键字：图像 保存 网页      更新时间：2023-09-26

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

HTML& lt;按钮onclick = " run () "> Generate 

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;

你可以使用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标签中生成图像(并将其附加到body)。然后，用户可以点击"另存为"来保存图像，就像他通常做的那样。

相关文章：