function MainComponent() { const [uploadedImages, setUploadedImages] = React.useState([]); const [combinedImage, setCombinedImage] = React.useState(null); const handleUpload = (event, index)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ const newImages = [ ...uploadedImages ]; newImages[index] = reader.result; setUploadedImages(newImages); }; reader.readAsDataURL(file); } }; const handleCombine = ()=>{ const validImages = uploadedImages.filter((src)=>src); if (validImages.length > 0) { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const images = validImages.map((src)=>{ const img = new Image(); img.src = src; return img; }); Promise.all(images.map((img)=>new Promise((resolve)=>{ img.onload = resolve; }))).then(()=>{ canvas.width = images.reduce((totalWidth, img)=>totalWidth + img.width, 0); canvas.height = Math.max(...images.map((img)=>img.height)); let xOffset = 0; images.forEach((img)=>{ ctx.drawImage(img, xOffset, 0); xOffset += img.width; }); setCombinedImage(canvas.toDataURL("image/jpeg")); }); } }; const handleDownload = ()=>{ if (combinedImage) { const link = document.createElement("a"); link.href = combinedImage; link.download = "combined-image.jpg"; link.click(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-bold mb-2", name: "upload1", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "アップロード1"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "block w-full text-lg", name: "upload1", onChange: (e)=>handleUpload(e, 0), __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-bold mb-2", name: "upload2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "アップロード2"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "block w-full text-lg", name: "upload2", onChange: (e)=>handleUpload(e, 1), __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-bold mb-2", name: "upload3", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "アップロード3"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "block w-full text-lg", name: "upload3", onChange: (e)=>handleUpload(e, 2), __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-bold mb-2", name: "upload4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "アップロード4"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "block w-full text-lg", name: "upload4", onChange: (e)=>handleUpload(e, 3), __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-bold mb-2", name: "upload5", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "アップロード5"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "block w-full text-lg", name: "upload5", onChange: (e)=>handleUpload(e, 4), __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-bold mb-2", name: "upload6", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "アップロード6"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "block w-full text-lg", name: "upload6", onChange: (e)=>handleUpload(e, 5), __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white font-bold py-2 px-4 rounded mb-4", onClick: handleCombine, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, "合体"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 w-[600px] h-[300px] flex justify-center items-center mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, combinedImage && /*#__PURE__*/ React.createElement("img", { src: combinedImage, alt: "Combined images display area", className: "object-contain max-w-full max-h-full", __source: { fileName: "", lineNumber: 81, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white font-bold py-2 px-4 rounded", onClick: handleDownload, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, "ダウンロード")); }