圖片切割工具 | Programming Project | OrangeApple Learning Platform

{"id":933539,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n    \u003ctitle\u003eImage Splitter Tool\u003c/title\u003e\\n    \u003cstyle\u003e\\n        body {\\n            font-family: Arial, sans-serif;\\n            margin: 20px;\\n        }\\n        .preview {\\n            border: 1px solid #ccc;\\n            margin-top: 10px;\\n            position: relative;\\n            display: inline-block;\\n        }\\n        canvas {\\n            max-width: 100%;\\n        }\\n        #controls {\\n            margin-top: 20px;\\n        }\\n    \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003ch1\u003eImage Splitter Tool\u003c/h1\u003e\\n\\n    \u003clabel for=\\\"imageInput\\\"\u003eUpload an image:\u003c/label\u003e\\n    \u003cinput type=\\\"file\\\" id=\\\"imageInput\\\" accept=\\\"image/*\\\"\u003e\\n\\n    \u003cdiv id=\\\"controls\\\"\u003e\\n        \u003clabel for=\\\"rows\\\"\u003eRows:\u003c/label\u003e\\n        \u003cinput type=\\\"number\\\" id=\\\"rows\\\" value=\\\"3\\\" min=\\\"1\\\"\u003e\\n\\n        \u003clabel for=\\\"cols\\\"\u003eColumns:\u003c/label\u003e\\n        \u003cinput type=\\\"number\\\" id=\\\"cols\\\" value=\\\"3\\\" min=\\\"1\\\"\u003e\\n\\n        \u003cbutton id=\\\"splitButton\\\"\u003eSplit and Download\u003c/button\u003e\\n    \u003c/div\u003e\\n\\n    \u003cdiv class=\\\"preview\\\"\u003e\\n        \u003ccanvas id=\\\"previewCanvas\\\"\u003e\u003c/canvas\u003e\\n    \u003c/div\u003e\\n\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/jszip\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/file-saver\\\"\u003e\u003c/script\u003e\\n    \u003cscript\u003e\\n        const imageInput = document.getElementById('imageInput');\\n        const previewCanvas = document.getElementById('previewCanvas');\\n        const splitButton = document.getElementById('splitButton');\\n        const rowsInput = document.getElementById('rows');\\n        const colsInput = document.getElementById('cols');\\n        const ctx = previewCanvas.getContext('2d');\\n\\n        let image = new Image();\\n\\n        imageInput.addEventListener('change', handleImageUpload);\\n\\n        function handleImageUpload(event) {\\n            const file = event.target.files[0];\\n            if (file) {\\n                const reader = new FileReader();\\n                reader.onload = (e) =\u003e {\\n                    image.src = e.target.result;\\n                };\\n                reader.readAsDataURL(file);\\n            }\\n        }\\n\\n        image.onload = () =\u003e {\\n            drawPreview();\\n        };\\n\\n        function drawPreview() {\\n            const rows = parseInt(rowsInput.value);\\n            const cols = parseInt(colsInput.value);\\n\\n            previewCanvas.width = image.width;\\n            previewCanvas.height = image.height;\\n            ctx.drawImage(image, 0, 0);\\n\\n            const cellWidth = image.width / cols;\\n            const cellHeight = image.height / rows;\\n\\n            ctx.strokeStyle = 'red';\\n            ctx.lineWidth = 2;\\n\\n            for (let i = 1; i \u003c cols; i++) {\\n                const x = i * cellWidth;\\n                ctx.beginPath();\\n                ctx.moveTo(x, 0);\\n                ctx.lineTo(x, image.height);\\n                ctx.stroke();\\n            }\\n            for (let j = 1; j \u003c rows; j++) {\\n                const y = j * cellHeight;\\n                ctx.beginPath();\\n                ctx.moveTo(0, y);\\n                ctx.lineTo(image.width, y);\\n                ctx.stroke();\\n            }\\n        }\\n\\n        rowsInput.addEventListener('input', drawPreview);\\n        colsInput.addEventListener('input', drawPreview);\\n\\n        splitButton.addEventListener('click', splitAndDownload);\\n\\n        function splitAndDownload() {\\n            const rows = parseInt(rowsInput.value);\\n            const cols = parseInt(colsInput.value);\\n            const zip = new JSZip();\\n            const cellWidth = image.width / cols;\\n            const cellHeight = image.height / rows;\\n\\n            const canvas = document.createElement('canvas');\\n            const context = canvas.getContext('2d');\\n            canvas.width = cellWidth;\\n            canvas.height = cellHeight;\\n\\n            let count = 1;\\n\\n            for (let y = 0; y \u003c rows; y++) {\\n                for (let x = 0; x \u003c cols; x++) {\\n                    context.clearRect(0, 0, cellWidth, cellHeight);\\n                    context.drawImage(image, x * cellWidth, y * cellHeight, cellWidth, cellHeight, 0, 0, cellWidth, cellHeight);\\n                    canvas.toBlob((blob) =\u003e {\\n                        zip.file(`${count}.png`, blob);\\n                        count++;\\n                        if (count \u003e rows * cols) {\\n                            zip.generateAsync({ type: 'blob' }).then((content) =\u003e {\\n                                saveAs(content, 'split-images.zip');\\n                            });\\n                        }\\n                    });\\n                }\\n            }\\n        }\\n    \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\",\"js\":\"// 創造一個函式指令 hello：\\nfunction hello () {\\n    // 讓網頁跳出文字訊息：\\n    alert('叩叮：\\\\n嗨你好～ 讓我們一起加油寫出漂漂亮亮的網頁唄！');\\n}\"}","created_at":"2025-01-16T18:18:00.076+08:00","updated_at":"2025-01-16T18:18:10.759+08:00","name":"圖片切割工具","language":"web","screenshot":{"url":"/uploads/project/screenshot/933539/5db22fc04bba799b1bb005d7971b8d0e.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":308,"hashid":"npmswnnpe","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}