图片融合下载

最新推荐文章于 2024-09-13 08:33:26 发布

AF01

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量268

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/songJunFeng1/article/details/134467884

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片融合</title>
    <style>
        .button-container {
            margin-top: 10px;
        }

        .button {
            margin-right: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>上传图片并与默认图片融合</h1>
    <input type="file" id="imageInput" accept="image/*">
    <div class="button-container">
        <button id="moveUpButton" class="button">上移</button>
        <button id="moveDownButton" class="button">下移</button>
        <button id="moveLeftButton" class="button">左移</button>
        <button id="moveRightButton" class="button">右移</button>
    </div>
    <canvas id="canvas" style="border: 1px solid black; width: 400px; height: 400px;"></canvas>
    <a id="downloadLink" style="display: none;" download="merged_image.png">下载融合后的图片</a>
    <!-- <img src="" id="imgsrc" alt=""> -->
    <script>

       
        const imageInput = document.getElementById('imageInput');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const downloadLink = document.getElementById('downloadLink');
        const moveUpButton = document.getElementById('moveUpButton');
        const moveDownButton = document.getElementById('moveDownButton');
        const moveLeftButton = document.getElementById('moveLeftButton');
        const moveRightButton = document.getElementById('moveRightButton');

        const defaultImage = new Image();
        defaultImage.src = 'default_image.png'; // 修改为相对路径
        defaultImage.onload = () => {
            canvas.width = defaultImage.width;
            canvas.height = defaultImage.height;
            drawUploaded();
        };

        let uploadedImage = null;
        let uploadedX = 0;
        let uploadedY = 0;

        imageInput.addEventListener('change', function () {
            const file = this.files[0];
            const reader = new FileReader();

            reader.onload = function (e) {
                uploadedImage = new Image();
                uploadedImage.src = e.target.result;

                uploadedImage.onload = function () {
                    canvas.width = defaultImage.width;
                    canvas.height = defaultImage.height;
                    drawUploaded();
                };
            };

            reader.readAsDataURL(file);
        });
        let = moveDistannce = 50
        moveUpButton.addEventListener('click', () => {
            uploadedY -= moveDistannce; // 调整上传图片的Y坐标
            drawUploaded();
        });

        moveDownButton.addEventListener('click', () => {
            uploadedY += moveDistannce; // 调整上传图片的Y坐标
            drawUploaded();
        });

        moveLeftButton.addEventListener('click', () => {
            uploadedX -= moveDistannce; // 调整上传图片的X坐标
            drawUploaded();
        });

        moveRightButton.addEventListener('click', () => {
            uploadedX += moveDistannce; // 调整上传图片的X坐标
            drawUploaded();
        });

        function drawUploaded() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (uploadedImage) {
                ctx.drawImage(uploadedImage, uploadedX, uploadedY, canvas.width, canvas.height);
                ctx.drawImage(defaultImage, 0, 0, canvas.width, canvas.height);

                const mergedImageDataURL = canvas.toDataURL('image/png');
                console.log(mergedImageDataURL, 'mergedImageDataURL');
                downloadLink.href = mergedImageDataURL;
                downloadLink.style.display = 'block';

                // canvas.toBlob((blob) => {
                //     const reader = new FileReader();

                //     reader.onload = () => {
                //         // 读取Blob数据并将其转换为Base64编码
                //         const base64Data = reader.result;
                //         downloadLink.href = base64Data;
                //         downloadLink.style.display = 'block';
                //         console.log(base64Data);
                //     };

                //     reader.readAsDataURL(blob);
                // }, 'image/png');
            }

        }
    </script>
</body>

</html>