Pywebview 环境下 Paper.js 图形渲染最佳实践

<script type="text/javascript" src="js/paper.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.min.js"></script>

import io
from PIL import Image
import base64
import webview

def extract_image(width, height, path=[(100, 100)]):
    """
    回调函数，用于在 pywebview 窗口中执行 Paper.js 绘图并提取图像。
    """
    color = 'red'

    def callback(window):
        # 1. 构建包含 Canvas 和 Paper.js CDN 链接的 HTML
        # 注意：这里将 Paper.js 库的加载路径更改为 CDN
        window.html = f"""
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.min.js"></script>
            <canvas id="myCanvas" width="{width}" height="{height}"></canvas>
            """

        # 2. 定义 Paper.js 绘图逻辑的 JavaScript 代码
        js_code = f"""
                var canvas = document.getElementById("myCanvas");
                // 确保 Paper.js 已经加载并初始化
                if (typeof paper === 'undefined') {{
                    console.error("Paper.js library is not loaded.");
                    return null; // 返回 null 或抛出错误
                }}
                paper.setup(canvas); // 初始化 Paper.js 项目

                var start = new paper.Point({path[0][0]}, {path[0][1]});
                var end = new paper.Point({path[0][0] + 1}, {path[0][1]});

                var paperPath = new paper.Path({{ // 避免与外部变量 path 冲突，改名 paperPath
                    segments: [start, end],
                    strokeColor: '{color}',
                    strokeCap: 'round',
                    strokeJoin: 'round',
                    strokeWidth: 10
                }});

                // 添加更多路径点
                paperPath.add(new paper.Point(200, 200));

                // 将路径添加到活动图层
                paper.project.activeLayer.addChild(paperPath);

                // 强制重绘视图
                paper.view.draw();

                // 返回一个标识，表明绘图已完成
                'drawing_complete';
                """

        # 3. 在 pywebview 窗口中执行 JavaScript 绘图代码
        print("执行 Paper.js 绘图脚本...")
        eval_result = window.evaluate_js(js_code)
        print(f"JavaScript 评估结果: {eval_result}")

        # 4. 从 Canvas 提取 Data URL
        # 确保在 Paper.js 渲染完成后再尝试提取
        data_url = window.evaluate_js("canvas.toDataURL('image/png')") # 指定图片格式
        print(f"Data URL 已提取: {data_url[:50]}...") # 打印部分 Data URL

        if not data_url or not data_url.startswith("data:image"):
            print("未能成功获取 Canvas Data URL，可能 Canvas 为空或出错。")
            window.destroy()
            return

        # 5. 解码 Data URL 并创建 PIL 图像
        try:
            base64_data = data_url.split(",")[1]
            image_data = io.BytesIO(base64.b64decode(base64_data))
            image = Image.open(image_data)

            # 6. 显示图像并销毁窗口
            image.show()
        except Exception as e:
            print(f"处理图像时发生错误: {e}")
        finally:
            window.destroy()

    return callback

def create_webview_window():
    """
    创建并返回一个隐藏的 pywebview 窗口。
    """
    return webview.create_window('Paper.js Renderer', frameless=True, hidden=True)

if __name__ == '__main__':
    window = create_webview_window()
    # 启动 pywebview，并在窗口加载后执行回调函数
    webview.start(extract_image(400, 400), window)