iT邦幫忙

2025 iThome 鐵人賽
DAY 17
0
Modern Web

融合AI圖像生成技術的前端開發實戰系列 第 17 篇

DAY17

17th鐵人賽
26 瀏覽

  • 分享至 

  • xImage
    •  

before/after 效果的前端邏輯實現

在這篇文章中，我們將專注於實現 Before/After 效果 的前端邏輯，處理圖片上傳、生成請求與結果展示。

功能需求

  1. 圖片上傳：監聽使用者的圖片上傳事件，並顯示預覽。
  2. 生成請求：將圖片與提示詞發送至後端，並等待生成結果。
  3. 結果展示：顯示原圖與生成圖，並提供下載功能。

JavaScript 主要功能與核心邏輯

  1. 初始化與事件綁定

初始化 DOM 元素，並綁定事件監聽器。

https://ithelp.ithome.com.tw/upload/images/20251001/20168630kxAzNGwO2G.png

  1. 圖片上傳預覽

處理使用者上傳的圖片，並顯示在 Before 區域。

https://ithelp.ithome.com.tw/upload/images/20251001/20168630uc7zGYaTHY.png

  1. 發送生成請求

將圖片與提示詞發送至後端，並等待生成結果。

https://ithelp.ithome.com.tw/upload/images/20251001/201686303Su6zqmBox.png

  1. 顯示生成結果

將後端返回的生成圖片顯示在 After 區域。

https://ithelp.ithome.com.tw/upload/images/20251001/20168630SPdDmWf9j1.png

  1. 下載功能

提供下載原圖、生成圖、對比圖的功能。

https://ithelp.ithome.com.tw/upload/images/20251001/20168630ZdkOoHlhsq.png

在這篇文章中，我們完成了 Before/After 效果的前端邏輯實現，並展示了圖片上傳、生成請求與結果展示的核心功能。


上一篇
DAY16
下一篇
DAY18
系列文
融合AI圖像生成技術的前端開發實戰 共 24 篇
  1. 20
    DAY20
  2. 21
    DAY21
  3. 22
    DAY22
  4. 23
    DAY23
  5. 24
    DAY24
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
16921 篇
完賽人數
198 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 17th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙