在后台捕获图像并保存在PHP中的文件夹中_Php_Html

在后台捕获图像并保存在PHP中的文件夹中

php html

在后台捕获图像并保存在PHP中的文件夹中,php,html,Php,Html,在后台捕获图像并将其保存在PHP中的文件夹中我创建了一个PHP页面，在该页面中，我们使用html2canvas（）捕获HTML图像，并通过ajax将该图像保存到文件夹中。当我从浏览器运行代码时，它会显示一个HTML并将图像保存在给定的文件夹中。（这里工作正常）问题是，当我使用cmd运行同一个文件时，比如通过PHP cmd或通过CRON（PHP test.PHP）运行同一个文件，那么它不会生成图像，而只是在终端中呈现HTML。如何在后台运行相同的代码并将生成的图像保存到文件夹中？ test

在后台捕获图像并将其保存在PHP中的文件夹中

我创建了一个PHP页面，在该页面中，我们使用html2canvas（）捕获HTML图像，并通过ajax将该图像保存到文件夹中。当我从浏览器运行代码时，它会显示一个HTML并将图像保存在给定的文件夹中。（这里工作正常）

问题是，当我使用cmd运行同一个文件时，比如通过PHP cmd或通过CRON（PHP test.PHP）运行同一个文件，那么它不会生成图像，而只是在终端中呈现HTML。 如何在后台运行相同的代码并将生成的图像保存到文件夹中？

test.php

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" id="capture">Capture & Save</button>
<div class="parent-wrapper">
    <div class="wrapper-box" id="canvas" width="1080" height="1080">
      <div class="heading">
        Lorem Ipsum
      </div>
      <div class="sub-heading">
        Lorem ipsum , Lorem
      </div>

      <div class="paragraph">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>

      <div class="bottom-heading">
        #Lorem
      </div>
    </div>
</div>
<script type="text/javascript">
function truncate(source, size) {
  return source.length > size ? source.slice(0, size - 1) + "..." : source;
}
var para = document.querySelector('.paragraph');
var res = truncate(para.innerHTML, 280);
para.innerHTML = res;
</script>


<script src="jquery-3.5.1.min.js"></script>
<script src="html2canvas.min.js"></script>
<script type="text/javascript">
$(function(){
  $('.movable_div').on('contextmenu', function(){
    return false;
  });
  
  $('#capture').click(function(){
    div_content = document.querySelector("#canvas");
    html2canvas(div_content, {
      dpi: 96,
      width: 1080,
      height: 1080,
    }).then(canvas => {
      data = canvas.toDataURL('image/jpeg', 1);
      save_img(data);      
    });
  });
  // Onload Click capture
  $('#capture').click();     
});
  
//to save the canvas image
function save_img(data){
  //ajax method.
  $.post('save_jpg1.php', {data: data}, function(res){
  });
}
</script>
</body>
</html>

终端不知道如何像浏览器一样呈现html文件-终端只会将html作为文本文件输出。我认为可能有一种方法可以通过编程触发这种呈现，您可以在页面加载时而不是单击后更新javascript以触发html2canvas。通过这种方式，您可以从命令行触发它，它将进行渲染，并使用图像启动save函数

看起来这可能对如何从终端运行html文件有一些想法：

具体来说，您可能希望尝试在本地提供html文件，并触发浏览器视图

您可以使用下面的库来实现这一点。
来源：

在PHP中编写脚本，并通过terminal运行以在背景中创建图像。
脚本使用相对路径。您是否希望文件保存在$HOME/output/中？如果没有，请将cd放入正确的目录。使用错误处理更新代码。现在用
进行测试
，它为您提供了一个与cron相似（但不完全相同）的环境“但是当我通过终端运行时，它是呈现HTML。如何通过终端触发脚本按钮单击。那么您想从crontab启动一个脚本并访问一个特定的页面吗？我尝试了1个cmd，但使用了--headless，但这也会在终端上呈现HTML代码。任何其他解决方案。当javascript触发时，查找该div的特定id以及该进程在终端中的工作方式是非常有用的源代码。目标是触发并运行1个ajax将图像保存到文件夹中。我还有别的办法吗？
<?php //just a random name for the image file $random = rand(100, 1000); $savefile = @file_put_contents("output/$random.jpg", base64_decode(explode(",", $_POST['data'])[1])); //if the file saved properly, print the file name if($savefile){ echo $random; } ?>

setTimeout(function(){ div_content = document.querySelector("#canvas"); html2canvas(div_content, { dpi: 96, width: 1080, height: 1080, }).then(canvas => { data = canvas.toDataURL('image/jpeg', 1); save_img(data); }); }, 5000);