function MainComponent() { const [error, setError] = useState(null); const [upload, { loading: uploading }] = useUpload(); const [qrCode, setQrCode] = useState(null); const [uploadedImageUrl, setUploadedImageUrl] = useState(null); const handleImageUpload = async (file)=>{ try { const { url, error } = await upload({ file }); if (error) { setError(error); return; } setUploadedImageUrl(url); // Generate QR code for the image URL const response = await fetch("/api/qr-code-generator", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) }); if (!response.ok) { throw new Error("QRコードの生成に失敗しました"); } const data = await response.json(); setQrCode(`data:image/png;base64,${data.body}`); } catch (err) { console.error(err); setError("エラーが発生しました"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "画像 → QRコード変換"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-2 border-dashed border-gray-300 rounded-lg p-4 text-center", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>e.target.files?.[0] && handleImageUpload(e.target.files[0]), className: "hidden", id: "imageInput", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "imageInput", className: "block cursor-pointer text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "画像をアップロード")), uploading && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "アップロード中..."), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-600 text-center", __source: { fileName: "", lineNumber: 67, columnNumber: 21 }, __self: this }, error), uploadedImageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "アップロードした画像:"), /*#__PURE__*/ React.createElement("img", { src: uploadedImageUrl, alt: "アップロードした画像", className: "w-full rounded-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this })), qrCode && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "生成されたQRコード:"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: qrCode, alt: "QRコード", className: "w-48 h-48", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-2 text-center", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "このQRコードを読み取ると、画像を表示できます"))))); }

画像 → QRコード 変換

画像 → QRコード変換