function Component() { const [image, setImage] = React.useState(null); const [cursorPos, setCursorPos] = React.useState(null); function handleImageUpload(e) { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.src = event.target.result; img.onload = function() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); setImage(canvas.toDataURL()); }; }; reader.readAsDataURL(file); } function handleMouseMove(e) { if (!image) return; const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; setCursorPos({ x, y }); const gridSize = 64 / 8; for(let i = -4; i < 4; i++){ for(let j = -4; j < 4; j++){ let px = x + i * gridSize; let py = y + j * gridSize; if (px < 0 || py < 0 || px >= canvas.width || py >= canvas.height) continue; const imgData = ctx.getImageData(px, py, gridSize, gridSize); const data = imgData.data; for(let k = 0; k < data.length; k += 4){ const grayscale = (data[k] + data[k + 1] + data[k + 2]) / 3; data[k] = data[k + 1] = data[k + 2] = grayscale; } ctx.putImageData(imgData, px, py); } } } return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full p-4 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4 font-noto", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "大人の逆・塗り絵"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageUpload, className: "mb-4", name: "imageUpload", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("canvas", { id: "canvas", className: "border", onMouseMove: handleMouseMove, style: { cursor: cursorPos ? 'crosshair' : 'default' }, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function ComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); }

大人の逆 ・塗り絵

大人の逆・塗り絵