提交时如何将表单文本转换为图像

Question

嗨，大家好，我正在尝试解决这种形式，当我单击表单中的提交按钮时，输出将变为图像/图片，并且字段中的所有数据也将在图像中编译。

如果你能帮助我解决这类问题，我会很高兴和感谢你的善意。

请检查图像作为我的样本。

Answer 1

客户端您可以使用canvas将文本绘制为图像。

var canvas = document.querySelector('canvas');
document.querySelector('form').addEventListener('submit', function(event) {
  var ctx = canvas.getContext('2d')
    , line = 0;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  [].forEach.call(event.srcElement.querySelectorAll('label'), function(label) {
    ctx.fillText(label.textContent + label.querySelector('input').value, 20, (++line) * 20);
  });
});

form, canvas { width: 500px }
canvas { height: 200px }
form > * { display: block }
form > * + * { margin-top: .5em; }
form input { width: 100% }

<form>
  <label>Name: <input name="name"></label>
  <label>Address: <input name="address"></label>
  <button>draw</button>
</form>
<canvas></canvas>

Answer 2

将textarea内容复制到div，运行html2canvas并通过ajax上传图像：

$('#submit').click(function() {
  var abc = $('#text1').val();
  var def = $('#text2').val();
  var ghi = $('#text3').val();
  $('#container').html('<div class = text1>' + abc + '</div><div class = text2>' + def + '</div><div class = text3>' + ghi + '</div>');
  html2canvas($('#container'), {
    onrendered: function(canvas) {
      myImage = canvas.toDataURL("image/png");
      $('#image').append(canvas);
      //$.ajax({
      //data: myImage
      // ....
    }
  });
});

#image {
  border: 1px solid black;
  margin: 10px;
  width: 100px; 
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<textarea id="text1">ABC</textarea>
<textarea id="text2">DEF</textarea>
<textarea id="text3">GHI</textarea>
<button id="submit">Submit</button>
<br>Your text will appear here ->
<br>
<div id="container"></div><br>
Your image will appear here ->
<br>
<div id="image"></div>