在 HTML Canvas 上使用使用者上傳的 PNG 檔案
好的，如果你想在 HTML Canvas 上使用使用者上傳的 PNG 檔案，主要涉及以下幾個步驟： HTML 部分：提供檔案上傳控制項 你需要一個 <input type="file"> 元素讓使用者選擇檔案。 JavaScript 部分： 監聽檔案選擇事件 ：當使用者選擇了檔案後， <input type="file"> 元素的 change 事件會被觸發。 讀取檔案內容 ：使用 FileReader API 來讀取上傳的檔案內容。對於圖片，通常會將其讀取為 Data URL。 創建 Image 物件 ：創建一個新的 HTMLImageElement ( new Image() )。 設定 Image 物件的 src ：將 FileReader 讀取到的 Data URL 設定為 Image 物件的 src 屬性。 監聽 Image 物件的 load 事件 ：圖片載入是異步的。你需要等待圖片完全載入後才能在 Canvas 上繪製它。 在 load 事件回呼中繪製圖片 ：一旦圖片載入完成，就可以使用 ctx.drawImage() 將其繪製到 Canvas 上。 以下是一個完整的範例程式碼： <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Upload PNG to Canvas </ title > < style > body { font-family : sans-serif; display : flex; flex-direction : column; align-items : center; margin-top : 20px ; ...