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

时间:2017-04-24 14:30:06

标签: javascript php html canvas

我使用网络摄像头拍摄了一些照片。 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'])) 现在,我怎样才能使用canvasPHP中获取照片(来自JavaScript)?

2 个答案:

答案 0 :(得分:0)

您应该查找canvas.toDataUrl()。

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

答案 1 :(得分:0)

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文件。