其中屏幕截图是在html2canvas()

Question

我试图通过php或ajax上传屏幕截图到服务器。但我无法找出屏幕截图是在哪里在html2canvas()?我已经搜索过了，但没有找到解决办法。请检查我的代码并指导我。

JS代码

$(function () {
  $("#btnSave").click(function () {
    html2canvas($("#widget"), {
      onrendered: function (canvas) {
        theCanvas = canvas;
        var image = canvas.toDataURL("image/jpeg");
        $('#captured_img').attr("src", image);
        $('#img_val').attr("value", image);
      }
    });
  });

<<h2> HTML代码/h2>

<div id="widget" class="widget">
  <h1>THE IMAGE</h1>
</div>
<input type="hidden" name="img_val" id="img_val" value=""/>
<div id="showImage">
  <img id="captured_img" src="" height="120" width="100"/>
</div>
<input type="button" id="btnSave" value="Save PNG"/>

Answer 1

image/jpeg不支持透明背景，使用image/png

html2canvas将返回DOM的canvas，您可以使用canvas的toDataURL方法获得base64数据。要上传base64作为图像，您需要解码base64数据。file_put_contents将字符串写入文件

使用如下脚本:

PHP脚本:

<?php
if (isset($_REQUEST['data'])) {
    $img = $_REQUEST['data'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = rand(0000000, 1131231) . '.png';
    $success = file_put_contents($file, $data);
    if ($success!==false) {
        echo 'done';
    } else {
        echo 'failed';
    }
}

HTML,JS:

$(function() {
  $("#btnSave").click(function() {
    html2canvas(document.getElementById('widget'), {
      onrendered: function(canvas) {
        var image = canvas.toDataURL("image/png");
        $('#captured_img').attr("src", image);
        $('#img_val').attr("value", image);
        $.post("decode.php", {
            data: image
          })
          .done(function(data) {
            alert("Status: " + data);
          });
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="widget" class="widget">
  <h1>THE IMAGE</h1>
</div>
<input type="hidden" name="img_val" id="img_val" value="" />
<div id="showImage">
  <img id="captured_img" src="" height="120" width="100" />
</div>
<input type="button" id="btnSave" value="Save PNG" />

Answer 2

您的图像不是在任何文件系统中创建的，它只是分配给图像源的base64编码字符串canvas.toDataURL("image/jpeg");。您可以将该字符串发送到ajax调用并在php函数中生成文件。有关如何从base64字符串创建图像的更多详细信息，请在php中下载到image的链接dataurl。