OVDR/docs/JSdocs/SendImage.js.html at main · SpectateurLinlan/OVDR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: SendImage.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: SendImage.js</h1>


    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * SendImage.js - Component to preview and send try-on result via email.
 *
 * @fileoverview Displays the final result image and provides a form for users to email it to themselves.
 * Validates email input, handles backend API interaction, and displays feedback messages.
 *
 * @author
 * Peini SHE &amp; Zixin DING
 */

import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";
import './SendImage.css';

/**
 * Utility: Convert image URL to base64 string using FileReader and fetch API
 * @param {string} imageUrl
 * @returns {Promise&lt;string>} base64-encoded image string
 */
const fetchImageAsBase64 = async (imageUrl) => {
    const response = await fetch(imageUrl);
    const blob = await response.blob();

    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
};

/**
 * SaveImage component allows users to view the try-on result and send it to their email.
 *
 * @component
 * @param {Object} props
 * @param {string|null} props.resultImage - URL of the final try-on image.
 * @returns {JSX.Element}
 */
function SaveImage({ resultImage }) {
    const navigate = useNavigate();
    const [email, setEmail] = useState("");
    const [message, setMessage] = useState("");

    /**
     * Send the result image to the provided email address.
     * Validates input and calls Flask backend API.
     */
    const sendEmail = async () => {
        if (!email) {
            setMessage("Please enter an email.");
            return;
        }

        try {
            const imageBase64 = await fetchImageAsBase64(resultImage);

            const response = await fetch("http://localhost:5000/send-email", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ email, imageBase64 }),
            });

            const data = await response.json();
            if (data.success) {
                setMessage("Email sent successfully!");
                setTimeout(() => setMessage(""), 3000);
            } else {
                setMessage("Failed to send email.");
                setTimeout(() => setMessage(""), 3000);
            }
        } catch (error) {
            setMessage("Error sending email.");
            console.error(error);
            setTimeout(() => setMessage(""), 3000);
        }
    };

    return (
        &lt;div className="tryon-container">
            &lt;header className="tryon-header">
                &lt;h1 className="logo">OVDR &lt;span className="title">Save Image&lt;/span>&lt;/h1>
                &lt;button className="back-btn" onClick={() => navigate("/tryon")}>Back to dressing room&lt;/button>
            &lt;/header>

            &lt;div className="image-preview">
                {resultImage ? (
                    &lt;img src={resultImage} alt="Try-On Result" className="tryon-result" />
                ) : (
                    &lt;p>No image available&lt;/p>
                )}
            &lt;/div>

            &lt;div className="download-section">
            {message &amp;&amp; (
                &lt;div className={`toast ${message.includes("successfully") ? "success" : "error"}`}>
                 {message}
                &lt;/div>
            )}
                &lt;input
                    type="email"
                    placeholder="Enter your email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                    &lt;button onClick={sendEmail} className='send-btn'>Send Image&lt;/button>
            &lt;/div>


            &lt;footer className="tryon-footer">
            &lt;a href="http://cslinux.nottingham.edu.cn/~Team202407/">About Us&lt;/a>
                &lt;a href="/privacy.html" target="_blank" rel="noopener noreferrer">Privacy Policy&lt;/a>
                &lt;a href="/docs/user_manual.pdf" target="_blank" rel="noopener noreferrer">Manual&lt;/a>
                &lt;a href="/contact.html">Help and Contact&lt;/a>
                &lt;p>Developed by TEAM2024.07&lt;/p>
            &lt;/footer>
        &lt;/div>
    );
}

export default SaveImage;</code></pre>
        </article>
    </section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#App">App</a></li><li><a href="global.html#ClothesDetail">ClothesDetail</a></li><li><a href="global.html#FullCloset">FullCloset</a></li><li><a href="global.html#History">History</a></li><li><a href="global.html#Home">Home</a></li><li><a href="global.html#Login">Login</a></li><li><a href="global.html#Register">Register</a></li><li><a href="global.html#SaveImage">SaveImage</a></li><li><a href="global.html#TryOn">TryOn</a></li><li><a href="global.html#fetchImageAsBase64">fetchImageAsBase64</a></li><li><a href="global.html#root">root</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Tue Apr 01 2025 12:14:54 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>