Question

我使用网络摄像头拍摄了一些照片。 HTML看起来像这样：

<div class="camera">
<video id="video">Video stream not available.</video>
</div>

使用<canvas>：

显示拍摄的照片

<div class="output">    
<canvas id="canvas"></canvas>
</div>

下面，我有一个带有保存按钮的<form>：

<form method="post">
<button name="savephoto">Save photo</button>
</form>

如果我按下了保存照片按钮，我就会在PHP办理登机手续：if (isset($_POST['savephoto'])) 现在，我怎样才能使用canvas在PHP中获取照片（来自JavaScript）？

Answer 1

您应该查找canvas.toDataUrl（）。

以下是一篇展示正在使用的文章：https://davidwalsh.name/convert-canvas-image

Answer 2

var canvas = document.getElementById("canvas");
var img    = canvas.toDataURL("image/png");

然后使用字段将其添加到您的表单并使用JS发布您的表单，在php端，您可以获取此字符串并将其添加到文件中。

      var form = document.getElementById("formID");
      var hiddenField = document.createElement("input");
      hiddenField.setAttribute("name", "canvasImg");
      hiddenField.setAttribute("value", img);
      form.appendChild(hiddenField);
form.post();

在你的php文件中，你可以用$ _POST [＆＃39; canvasImg＆＃39;]获取你的图像字符串但是在你的html中你必须在提交属性中设置php文件。

使用JS将<canvas>图像发送到PHP

2 个答案: