Javascript 保存画布并将其用作背景img_Javascript_Html_Html5 Canvas_Storage

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

javascript html html5-canvas

Javascript 保存画布并将其用作背景img,javascript,html,html5-canvas,storage,Javascript,Html,Html5 Canvas,Storage,任何善良的人我花了好几个小时想知道我是如何完成编码的，当用户在画布上画完后，他们可以点击一个名为“保存”的btn。之后，画布的图像将显示为网页的BG img 即使在用户关闭web浏览器后，当用户再次打开它时，bg img仍然存在。我不确定是否有可能做到这一点。这里需要一些帮助，如果需要我的完整编码，我可以提供下面是用户单击“保存”btn时我的当前编码。（以图像形式打开新窗口。）您可以使用toDataURL设置背景，使用localStorage“永久”存储图像：使用draw使用随机矩形

任何善良的人

我花了好几个小时想知道我是如何完成编码的，当用户在画布上画完后，他们可以点击一个名为“保存”的btn。之后，画布的图像将显示为网页的BG img

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

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

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

使用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-Bin
画
设置

JS:

var$=document.getElementById.bind（文档）；
var-cv=$（'cv'）；
var ctx=cv.getContext（'2d'）；
函数randFill（）{
ctx.clearRect（0,0，cv.宽度，cv.高度）；
对于（var i=0；i
<!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>

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;