利用 html2canvas 将制定区域输出为图片并用PHP接收

最新推荐文章于 2023-12-07 10:13:41 发布

Byte_Dance

最新推荐文章于 2023-12-07 10:13:41 发布

阅读量1k

点赞数

分类专栏： Jquery

Jquery 专栏收录该内容

44 篇文章

订阅专栏

本文介绍如何使用html2canvas库将前端指定的页面区域转换为图片，并通过PHP进行接收处理。首先，确保引入jquery.js和html2canvas.js，然后在前端调用html2canvas方法进行截图操作，最后配合PHP实现后台接收。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端发送页面：需要引入两个包 jquery.js 和 html2canvas.js

html2canvas下载传送门：http://html2canvas.hertzen.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="html2canvas.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>


<div id="box" style="width:100px;background:red;margin:100px;">
    <h1>截图、截图</h1>
    <h1>截图、截图</h1>
    <h1>截图、截图</h1>
</div>

<button id="btn">按钮</button>

<script>
    $(function () {
        $("#btn").click(function () {
            var sr = document.getElementById("box");
            html2canvas(sr).then(function (canvas) {
                document.body.appendChild(canvas);
                var html_canvas = canvas.toDataURL();
                $.post('server.php', {html_canvas:html_canvas}, function(json){
                }, 'json');
            });
        });
    });
</script>

</body>
</html>

php接收页面

<?php


    if (isset($_POST['html_canvas'])) {
        $order_id = $_POST['order_id'];
        $type_id = $_POST['type_id'];
        $html_canvas = $_POST['html_canvas'];
        $image = base64_decode(substr($html_canvas, 22));
        header('Content-Type: image/png');
        $filename = $order_id . '1' . $type_id . ".png";
        $fp = fopen($filename, 'w');
        fwrite($fp, $image);
        fclose($fp);
    }


?>