保存画布并将其用作背景img

Save canvas and use it as background img

本文关键字：背景 img 保存      更新时间：2023-09-26

任何一种灵魂，

我花了几个小时想知道如何以这样一种方式进行编码，即当用户在画布上绘制后，他们可以点击一个名为"保存"的btn。之后，画布的图像将显示为网页的BG img。

即使在用户关闭web浏览器之后，当用户再次打开它时，bg-img仍然存在。我不确定是否有可能做这件事。这里需要一些帮助，如果需要我的完整编码，我可以提供。

以下是用户单击"保存"btn时我的当前编码。（以图像形式打开新窗口。）

// Save image
var saveImage = document.createElement("button");
saveImage.innerHTML = "Save canvas";
saveImage.addEventListener("click", function (evt) {
    window.open(canvas.toDataURL("image/png"));
    evt.preventDefault();
}, false);
document.getElementById("main-content").appendChild(saveImage);

您可以使用toDataURL设置背景，并使用localStorage"永久"存储图像：

http://jsbin.com/japekuzi/1/

使用draw用随机矩形填充画布，使用set按钮设置并存储当前画布作为背景。

请注意，当您（重新）运行jsbin时，它仍然保持其最新的背景。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id='cv'></canvas>
  <button id='dr'>draw</button>
  <button id='st'>set</button>
</body>
</html>

JS:

var $=document.getElementById.bind(document);
var cv  = $('cv');
var ctx = cv.getContext('2d');
function randFill() {
  ctx.clearRect(0,0,cv.width, cv.height);
  for(var i=0; i<10; i++) {
    var c= 0 | ( Math.random()* 360);
    ctx.fillStyle = 'hsl('+c+',75%,75%)';
    ctx.fillRect(Math.random()*cv.width*0.8, 
                 Math.random()*cv.height*0.8, 20, 20);
  }
}
function set() {
  localStorage.setItem("bg", cv.toDataURL());
  retrieve();
}
function retrieve() {
  var cvURL =   localStorage.getItem("bg", cv.toDataURL());
  if (!cvURL) return;
  document.body.style. backgroundImage ='url('+ cvURL+')';  
}
randFill();
retrieve();
$('dr').onclick=randFill;
$('st').onclick=set;
相关文章：