在 HTML Canvas 上使用使用者上傳的 PNG 檔案

 好的，如果你想在 HTML Canvas 上使用使用者上傳的 PNG 檔案，主要涉及以下幾個步驟：

  1. HTML 部分：提供檔案上傳控制項
    你需要一個 <input type="file"> 元素讓使用者選擇檔案。

  2. 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; }
        canvas { border: 1px solid black; margin-top: 20px; }
        input[type="file"] { margin-bottom: 10px; }
    </style>
</head>
<body>

    <label for="imageUpload">選擇一個 PNG 檔案：</label>
    <input type="file" id="imageUpload" accept="image/png">

    <canvas id="myCanvas" width="400" height="300"></canvas>

    <script>
        const imageUpload = document.getElementById('imageUpload');
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        imageUpload.addEventListener('change', function(event) {
            const files = event.target.files; // 獲取選擇的檔案列表

            if (files && files.length > 0) {
                const file = files[0]; // 我們只處理第一個選擇的檔案

                // 檢查檔案類型是否為 PNG (可選，但推薦)
                if (file.type === "image/png") {
                    const reader = new FileReader();

                    // 當 FileReader 成功讀取檔案後觸發
                    reader.onload = function(e) {
                        const img = new Image(); // 創建一個新的 Image 物件

                        // 當 Image 物件成功載入圖片數據後觸發
                        img.onload = function() {
                            // 清除之前的畫布內容 (可選)
                            ctx.clearRect(0, 0, canvas.width, canvas.height);

                            // 將圖片繪製到 Canvas 上
                            // ctx.drawImage(image, dx, dy);
                            // ctx.drawImage(image, dx, dy, dWidth, dHeight);
                            // ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

                            // 範例1：將圖片繪製在 (0,0) 位置，使用圖片原始尺寸
                            // ctx.drawImage(img, 0, 0);

                            // 範例2：將圖片縮放/拉伸以適應 Canvas 的一部分或全部
                            // 例如，將圖片繪製在 (10,10)，寬度200，高度150
                            // ctx.drawImage(img, 10, 10, 200, 150);

                            // 範例3：保持圖片的原始長寬比，使其適應 Canvas (較複雜，但常用)
                            const canvasWidth = canvas.width;
                            const canvasHeight = canvas.height;
                            const imgWidth = img.naturalWidth; // 圖片的原始寬度
                            const imgHeight = img.naturalHeight; // 圖片的原始高度

                            const hRatio = canvasWidth / imgWidth;
                            const vRatio = canvasHeight / imgHeight;
                            const ratio = Math.min(hRatio, vRatio); // 取較小的縮放比例以確保圖片完整顯示

                            const newWidth = imgWidth * ratio;
                            const newHeight = imgHeight * ratio;

                            // 計算繪製位置，使圖片在 Canvas 中居中
                            const offsetX = (canvasWidth - newWidth) / 2;
                            const offsetY = (canvasHeight - newHeight) / 2;

                            ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);

                            console.log(`圖片 "${file.name}" 已繪製到 Canvas。`);
                        };

                        // 當 Image 物件載入圖片數據失敗時觸發
                        img.onerror = function() {
                            console.error("載入圖片時發生錯誤。");
                            alert("無法載入圖片。請確保檔案格式正確。");
                        };

                        // 設定 Image 物件的 src 為 FileReader 讀取到的 Data URL
                        // Data URL 是一個以 "data:" 開頭的 URL，它直接包含了檔案的內容
                        img.src = e.target.result;
                    };

                    // 當 FileReader 讀取檔案失敗時觸發
                    reader.onerror = function() {
                        console.error("讀取檔案時發生錯誤。");
                        alert("讀取檔案失敗。");
                    };

                    // 開始讀取檔案，將其讀取為 Data URL
                    reader.readAsDataURL(file);

                } else {
                    alert("請選擇一個 PNG 格式的圖片檔案。");
                    // 清空檔案選擇，以便使用者可以重新選擇
                    event.target.value = null;
                }
            }
        });
    </script>

</body>
</html>

程式碼解釋：

  1. imageUpload.addEventListener('change', ...):

    • 當使用者通過檔案選擇框選擇了一個或多個檔案後，這個事件會被觸發。

    • event.target.files 是一個 FileList 物件，包含了使用者選擇的所有檔案。我們通常取第一個 files[0]。

  2. 檔案類型檢查 (if (file.type === "image/png")):

    • 這是一個前端的簡單檢查，可以提示使用者選擇正確的檔案類型。但這不是絕對安全的，伺服器端仍然需要進行驗證（如果檔案會上傳到伺服器的話）。

  3. FileReader:

    • const reader = new FileReader();：創建一個 FileReader 實例。

    • reader.onload = function(e) { ... }：當 FileReader 成功完成讀取操作時的回呼函數。e.target.result 將會包含讀取到的檔案內容（在這裡是 Data URL）。

    • reader.onerror = function() { ... }：讀取失敗時的回呼。

    • reader.readAsDataURL(file);：這是觸發 FileReader 開始讀取檔案的方法。它會將檔案內容編碼成一個 Base64 的 Data URL 字串。

  4. Image 物件:

    • const img = new Image();：創建一個 HTMLImageElement。這和你在 HTML 中寫 <img src="..."> 是類似的，只是我們在 JavaScript 中動態創建和操作它。

    • img.onload = function() { ... }：這是非常關鍵的一步。圖片載入是異步的。你必須等到圖片的數據完全下載並解碼完成後，才能在 Canvas 上繪製它。這個回呼函數會在圖片準備好時執行。

    • img.onerror = function() { ... }：圖片載入失敗時的回呼。

    • img.src = e.target.result;：將 FileReader 生成的 Data URL 賦值給 img.src。這會觸發瀏覽器開始載入圖片數據。

  5. ctx.drawImage(image, ...):

    • 在 img.onload 回呼中，圖片已經準備好了。

    • ctx.drawImage() 有多種重載形式：

      • ctx.drawImage(image, dx, dy): 在 Canvas 的 (dx, dy) 位置繪製圖片，使用圖片的原始尺寸。

      • ctx.drawImage(image, dx, dy, dWidth, dHeight): 在 Canvas 的 (dx, dy) 位置繪製圖片，並將其縮放/拉伸到指定的 dWidth 和 dHeight。

      • ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): (切片繪製) 從源圖片的 (sx, sy) 位置開始，截取 sWidth x sHeight 大小的區域，然後將這個區域繪製到 Canvas 的 (dx, dy) 位置，並縮放/拉伸到 dWidth x dHeight。

    • 範例中，我提供了一個保持圖片長寬比並使其在 Canvas 中居中顯示的常用方法。img.naturalWidth 和 img.naturalHeight 用於獲取圖片的原始像素尺寸。

流程總結：
選擇檔案 -> FileReader 讀取為 Data URL -> Image 物件的 src 設為 Data URL -> Image 物件觸發 load 事件 -> 在 load 回呼中使用 ctx.drawImage() 繪製。

這個流程可以確保你總是在圖片完全可用時才嘗試繪製它，避免了常見的錯誤。

留言

張貼留言

這個網誌中的熱門文章

Offscreen Canvas

 你說得完全正確！這是一個非常經典的效能最佳化思路。如果尖刺框的參數沒有改變，重複計算所有尖刺的路徑和幾何形狀確實是一種浪費。 有幾種方法可以「記憶」或快取你畫的尖刺框，避免不必要的重繪計算： 快取到一個離屏 Canvas (Offscreen Canvas) - 最推薦的方法 原理 ：創建一個與主 Canvas 大小相同（或者只需要能容納尖刺框的大小）的隱藏 Canvas。當尖刺框的參數改變時，或者第一次繪製時，將完整的尖刺框（包括尖刺和中間的填充橢圓）繪製到這個離屏 Canvas 上。 後續繪製 ：在主 Canvas 的每一幀渲染時，如果尖刺框的參數沒有改變，你只需要使用 ctx.drawImage() 將離屏 Canvas 的內容直接繪製到主 Canvas 的目標位置即可。這遠比重新計算和繪製所有尖刺要快得多。 優點 ： 效能提升顯著， drawImage 非常快。 代碼結構清晰，繪製邏輯和快取邏輯分離。 可以快取包含複雜效果（如漸層、陰影等）的圖形。 缺點 ： 需要額外的記憶體來儲存離屏 Canvas。對於大多數尖刺框來說，這通常不是問題。 如果尖刺框需要動態改變大小或位置，離屏 Canvas 的管理（重新創建或調整大小）需要考慮。 快取路徑指令 (Path2D Object) - 適用於路徑本身 原理 ： Path2D 物件可以儲存一系列的 Canvas 路徑指令（ moveTo , lineTo , ellipse , bezierCurveTo 等）。當尖刺框的參數改變時，你構建一個或多個 Path2D 物件來代表尖刺框的各個部分（例如，一個 Path2D 給中心橢圓，另一個給所有尖刺的集合）。 後續繪製 ：如果參數未變，你可以直接使用 ctx.fill(cachedPath) 或 ctx.stroke(cachedPath) 來繪製已儲存的路徑。 優點 ： 比重新執行所有 moveTo/lineTo 更快一些，因為路徑已經編譯好了。 記憶體佔用可能比離屏 Canvas 小。 缺點 ： Path2D 只儲存路徑，不儲存樣式（顏色、線寬等）。你仍然需要在繪製時設定 ctx.fillStyle , ctx.strokeStyle , ctx.lineWidth 。 對於你用 drawTaperedLine 繪製的填充錐形尖刺，...
閱讀完整內容

外部網頁新增 Google 日曆行程(URL模板)

  好的，從外部網頁新增 Google 日曆行程，最常用且最簡單的方法是使用 Google Calendar Event Publisher Guide 提供的 URL 模板 。這種方法不需要複雜的 API 整合或使用者授權流程 (OAuth)，只需要產生一個特殊格式的連結即可。 使用者點擊這個連結後，會被導向到他們自己的 Google 日曆，並看到一個預先填好資訊的新增行程頁面，他們只需要確認並儲存即可。 以下是詳細步驟和說明： 方法：使用 Google 日曆事件發布連結 (URL Template) 基本 URL 結構： https: //www.google.com/calendar/render?action=TEMPLATE 添加參數以預填行程資訊： 在基本 URL 後面加上 & 和 參數名稱=參數值 來指定行程細節。重要的參數包括： text : 行程標題 (必填) 。 範例： &text=團隊會議 dates : 行程開始和結束時間 (必填) 。格式非常重要，必須是 ISO 8601 格式，且 強烈建議使用 UTC (世界標準時間) ，以避免時區混淆。 特定時間格式： YYYYMMDDTHHMMSSZ/YYYYMMDDTHHMMSSZ (Z 表示 UTC) 範例 (2024年7月26日 UTC 下午 2:00 到 3:00)： &dates=20240726T140000Z/20240726T150000Z 全天事件格式： YYYYMMDD/YYYYMMDD (結束日期是 不包含 的那一天的日期，所以通常是開始日期加一天) 範例 (2024年7月27日全天)： &dates=20240727/20240728 location : 行程地點 。 範例： &location=台北101會議室 details : 行程說明或備註 。可以包含換行符號 ( \n )。 範例： &details=討論下一季專案規劃。\n請攜帶筆記型電腦。 sprop : 來源網站資訊 (可選，但建議加入)。 範例： &sprop=name:我的網站名稱&sprop=url:https://www.mywebsite.com add : 邀請的賓客 Email (可選)...
閱讀完整內容

計算 Canvas 文字最大字體

 好的，我將產生一個 HTML 頁面，其中包含一個 Canvas 元素和一個文字輸入框。當你在輸入框中輸入文字並點擊按鈕後，程式碼會自動計算出在指定的 Canvas 寬度內，該文字能夠完整顯示的最大字體大小，並將該字體大小的文字繪製在 Canvas 上。 <html> <head> <title>計算 Canvas 文字最大字體</title> <style> #myCanvas { border: 1px solid black; } </style> </head> <body> <div> <label for="inputText">輸入文字:</label> <input type="text" id="inputText" value="Hello"> </div> <div> <label for="canvasWidth">Canvas 寬度:</label> <input type="number" id="canvasWidth" value="300"> </div> <button id="calculateBtn">計算並繪製</button> <canvas id="myCanvas" width="300" height="100"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const inputText = document.getElementById('inputText...
閱讀完整內容