function MainComponent() { const [img1, setImg1] = React.useState(null); const [img2, setImg2] = React.useState(null); const [centerY, setCenterY] = React.useState(0); const fileInputRef = React.useRef(); const handleButtonClick = ()=>{ fileInputRef.current.click(); }; const handleFileChange = (e)=>{ const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event)=>{ const img = new Image(); img.onload = ()=>{ setImg1({ src: event.target.result, width: img.width, height: img.height, element: img }); }; img.src = event.target.result; }; reader.readAsDataURL(file); } }; const handleDownload = ()=>{ const link = document.createElement('a'); link.href = img2; link.download = "img2.png"; link.click(); }; const handleImageClick = (e)=>{ if (!img1) return; const rect = e.target.getBoundingClientRect(); const y = e.clientY - rect.top; alert(`Clicked at y: ${y}px`); performTrimming(y); }; const performTrimming = (centerY)=>{ if (!img1) return; const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const trimHeight = img1.height / 3; const cropStartY = centerY - trimHeight / 2; canvas.width = img1.width; canvas.height = trimHeight; context.drawImage(img1.element, 0, cropStartY, img1.width, trimHeight, 0, 0, img1.width, trimHeight); setImg2(canvas.toDataURL("image/png")); }; const handleCenterYChange = (e)=>{ setCenterY(e.target.value); }; const handleTrimButtonClick = ()=>{ const centerYValue = parseInt(centerY, 10); if (img1 && !isNaN(centerYValue)) { performTrimming(centerYValue); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4 font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleButtonClick, className: "bg-blue-500 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, "画像をアップロードするボタン"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", name: "imageUpload", id: "fileInput", className: "hidden", ref: fileInputRef, onChange: handleFileChange, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }), img1 && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: img1.src, alt: "Uploaded image", className: "w-[400px] object-contain cursor-pointer", onClick: handleImageClick, __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Width: ", img1.width, "px, Height: ", img1.height, "px")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "centerY", value: centerY, onChange: handleCenterYChange, placeholder: "Center Y coordinate", className: "border rounded px-2 py-1", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleTrimButtonClick, className: "bg-yellow-500 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, "トリム画像")), img2 && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: img2, alt: "Trimmed rectangle image", className: "w-[200px] h-[150px] object-contain", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "bg-green-500 text-white font-bold py-2 px-4 rounded mt-4", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "png画像としてダウンロードボタン"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 132, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this })); }