Question

我有几个输入字段会被用户填充。此外，我有一个字段显示当前时间和用户选择的图像。我在<div id="container">中打包了所有内容现在我想在用户点击按钮时将此div保存为.png。

最好的方法是什么？

我正在考虑用画布绘制所有东西，但我不确定这是可能的还是一种好方法。我在这里尝试了这个设置Input form inside canvas element

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

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

谢谢！

Answer 1

快速而肮脏的演示：

如何为点击的图像添加注释和时间戳，然后让用户在本地保存：

＆＃13;

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); }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

从html的一部分创建一个png

1 个答案: