屏幕截图是在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);
      }
    });
  });

HTML代码

<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

您的图像未在任何文件系统中创建，它只是分配给图像源的base64编码字符串JSMPP。 您可以将该字符串发送到ajax调用并在php函数中创建一个文件。有关如何从base64字符串创建图像的更多详细信息，请访问链接dataurl to image for download in php。

Answer 2

  

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

     

html2canvas会返回您canvas的{​​{1}}，您可以使用DOM画布方法获取base64数据。要将toDataURL上传为图像，您需要解码base64数据。 base64将字符串写入文件。

     

使用以下脚本：

PHP脚本：

file_put_contents

HTML＆amp; JS：

<?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';
    }
}

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