javascript - 从 html 的一部分创建 png

Question

我有几个输入字段将由用户填充。此外，我还有一个显示当前时间的字段和用户选择的图像。我把所有东西都装在 <div id="container"> 中现在我想在用户点击按钮时将此 div 保存为 .png。

最好的方法是什么？

我正在考虑在 Canvas 上绘制所有内容，但我不确定这是否可能或一个好方法。 我在这里尝试了这个设置Input form inside canvas element

但是输入甚至不在 Canvas 中，因此当我将 Canvas 下载为图片时，输入不在其中。

有人能指出我正确的方向吗？

谢谢!

Answer 1

快速而肮脏的演示:

如何对单击的图像进行注释和时间戳，然后让用户将其保存在本地:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var currentImg,currentText;

draw();

$('img').on('click',function(){
  currentImg=this;
  draw();
});

//
$('#text').on('keyup',function(e){
  currentText=($(this).val());
  draw();
});

//
$('#save').click(function(){
  $('<br>Right-Click the image below to save it<br>').appendTo('body');
  $('<img />',{
    src:canvas.toDataURL(),
  })
  .addClass('withBorder')
  .appendTo('body');
});


function draw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.fillText(new Date(),5,20);
  if(currentText){ ctx.fillText(currentText,5,35); }
  if(currentImg){ ctx.drawImage(currentImg,0,50); }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
.withBorder{border:1px solid blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on a car of your choice</h4>
<img crossOrigin='anonymous' src='https://dl.dropboxusercontent.com/u/139992952/multple/car1.png'>
<img crossOrigin='anonymous' src='https://dl.dropboxusercontent.com/u/139992952/multple/car2.png'>
<br>
Comment:&nbsp;<input type='text' id=text>
<br>
<canvas id="canvas" width=300 height=100></canvas>
<br>
<button id='save'>Save</button>