html2canvas() 中的屏幕截图在哪里？答案

【问题标题】：Where the screenshot is being made in the html2canvas()?html2canvas() 中的屏幕截图在哪里？
【发布时间】：2016-01-14 19:48:15
【问题描述】：

我正在尝试通过 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"/>

【问题讨论】：

在onrendered 之后，您可以在captured_img 中查看它吗？您要查看图像还是将其保存在服务器上？另外注意image/jpeg不支持透明背景，使用png
@RayonDabre 是的，我可以在onrendered 之后查看captured_img。我想在 php 服务器上上传图片

标签： javascript php jquery html5-canvas

【解决方案1】：

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

html2canvas 将返回您的canvas 的DOM，您可以使用画布的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" />

【讨论】：

感谢它的工作，但下一步我如何在服务器上上传文件。我想在表单提交后上传图片。现在我在alert获得完成状态@
在上面的脚本中，图片是使用ajax上传的。如果要在表单提交时上传，可以使用提供的php 脚本，但从img_val（隐藏字段）读取数据
你的意思是我必须将$success 存储在img_val（隐藏字段）中？
否如果您提交表单，则无需使用ajax。设置隐藏字段的值后，使用$('form_id').submit() 提交表单。
好的，谢谢你能告诉我为什么$success 给我这个6873 当我print 它所以我怎么上传这仍然不是图像？

【解决方案2】：

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

【讨论】：