PHP实现两张图片的合并

最新推荐文章于 2025-02-28 00:15:00 发布

火³可²

最新推荐文章于 2025-02-28 00:15:00 发布

阅读量1.2k

点赞数 22

分类专栏：基础练习文章标签： php 前端

本文链接：https://blog.youkuaiyun.com/zkxiaoxiangzhu/article/details/143792390

版权

基础练习专栏收录该内容

17 篇文章

订阅专栏

要求

首先要确认GD库是否安装，若未安装则需要去先安装GD库后再进行操作

有两个方法可快速检查是否安装GD库：

1、在PHP脚本中用 phpinfo() 来查看配置信息

2、在命令行中执行 php -m 命令来查看是否有此模块

效果

这里做了个简单的页面方便看合并的效果

代码

页面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并图片</title>
</head>
<body>
    <form action="index.php" method="post">
        <h3>图一作为背景</h3>
        <div>
            图一：
            <input type="file" id="image1" name="image1" />
            <img style="width: 100px; height: 100px" id="preview1" src="default-image.png" alt="" />
        </div>
        <div id="info1"></div>
        <div>
            图二：
            <input type="file" id="image2" name="image2" />
            <img style="width: 100px; height: 100px" id="preview2" src="default-image.png" alt="" />
        </div>
        <div id="info2"></div>
        <div style="margin-top: 20px">
            图二合并后期望大小：
            <label>
                宽度：<input type="number" id="image2width" name="image2width">&nbsp;px
            </label>
            <label>
                &nbsp;&nbsp;&nbsp;高度：<input type="number" id="image2height" name="image2height">&nbsp;px
            </label>
        </div>
        <div style="margin-top: 20px">
            图二坐标：
            <label>
                x轴：<input type="number" id="image2x" name="image2x">&nbsp;px
            </label>
            <label>
                &nbsp;&nbsp;&nbsp;y轴：<input type="number" id="image2y" name="image2y">&nbsp;px
            </label>
        </div>
        <input style="margin-top: 10px" type="submit" value="提交">
        <div>
            合并后的图片：
            <img id="image" style="width: 300px; height: 150px" src="" alt="" />
        </div>
    </form>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#image1').on('change', function(event) {
                var files = event.target.files;
                if (files && files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#preview1').attr('src', e.target.result);
                        var img = new Image();
                        img.src = e.target.result;
                        img.onload = function() {
                            $('#info1').text('宽度: ' + img.width + 'px, 高度: ' + img.height + 'px');
                        }
                    };
                    reader.readAsDataURL(files[0]);
                }
            });
            $('#image2').on('change', function(event) {
                var files = event.target.files;
                if (files && files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#preview2').attr('src', e.target.result);
                        var img = new Image();
                        img.src = e.target.result;
                        img.onload = function() {
                            $('#info2').text('宽度: ' + img.width + 'px, 高度: ' + img.height + 'px');
                        }
                    };
                    reader.readAsDataURL(files[0]);
                }
            });
        });
        // 提交表单
        $('form').on('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: 'index.php',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(data) {
                    $('#image').attr('src', data);
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        });
    </script>
</body>
</html>

展示的页面不是很重要，按照自己的习惯写即可。下边是PHP合并图片的代码，非常的好理解，没有花里胡哨的代码，只求功能的实现。

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // 保存图片的目录
    $image_dir = "uploads/";
    // 图一（作为背景）
    $image1 = $image_dir . basename($_FILES["image1"]["name"]);
    // 图二
    $image2 = $image_dir . basename($_FILES["image2"]["name"]);
    // 这里对文件类型和大小的判断就省略了，需要的可自行加上
    move_uploaded_file($_FILES["image1"]["tmp_name"], $image1);
    move_uploaded_file($_FILES["image2"]["tmp_name"], $image2);
    $image1 = imagecreatefromstring(file_get_contents($image1));
    $image2 = imagecreatefromstring(file_get_contents($image2));
    // 合并
    imagecopyresampled($image1, $image2, $_POST["image2x"], $_POST["image2y"], 0, 0, $_POST["image2width"],$_POST["image2height"], imagesx($image2), imagesy($image2));
    // 保存合并后的图片
    $fileName = $image_dir . "image" . rand(10000, 99999) . '.png';
    imagepng($image1, $fileName);
    // 返回结果
    echo $fileName;
}

以上就是用PHP实现图片合并的全部代码了，是不是非常简洁方便~