JSP Canvas 圖片轉 Base64 上傳 Servlet 完整實現

前端 JSP/JS 代碼

<canvas id="canvas" width="740" height="500"></canvas>
<button id="btnSave">保存</button>

<script>
document.getElementById('btnSave').onclick = function() {
    const canvas = document.getElementById('canvas');
    const dataUrl = canvas.toDataURL('image/png'); // data:image/png;base64,...
    
    // 發送到後端
    fetch('UploadServlet', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'imageData=' + encodeURIComponent(dataUrl)
    }).then(res => res.text()).then(console.log);
};
</script>

後端 Servlet 處理

@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String base64Data = req.getParameter("imageData");
        if (base64Data == null) return;
        
        // 移除 data:image/png;base64, 前綴
        String base64 = base64Data.substring(base64Data.indexOf(",") + 1);
        
        // 解碼
        byte[] imageBytes = Base64.getDecoder().decode(base64);
        
        // 保存文件
        String fileName = "drawing_" + System.currentTimeMillis() + ".png";
        Path path = Paths.get(getServletContext().getRealPath("/uploads"), fileName);
        Files.write(path, imageBytes);
        
        resp.getWriter().write("上傳成功: " + fileName);
    }
}

關鍵點

• canvas.toDataURL('image/png') 返回 Base64 Data URL
• 前端 encodeURIComponent 防止特殊字符截斷
• 後端 Base64.getDecoder() (Java 8+) 解碼
• 文件保存路徑需確保目錄存在且可寫