解决 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)]):
    color = 'red'

    def callback(window):
        # 确保 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>
            """

        # Paper.js 绘图逻辑
        js_code = f"""
                var canvas = document.getElementById("myCanvas");
                // 确保 Paper.js 已经加载并可用
                if (typeof paper === 'undefined') {{
                    console.error("Paper.js library not loaded.");
                    return 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' 冲突
                    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();

                // 返回 Canvas 的 Data URL
                return canvas.toDataURL();
                """

        print("Executing JS code...")
        data_url = window.evaluate_js(js_code) # 直接获取 data_url

        if data_url:
            print(f"Data URL received. Length: {len(data_url)}")
            # 提取 base64 编码的图像数据
            base64_data = data_url.split(",")[1]

            # 解码 base64 数据并创建 PIL 图像
            image_data = io.BytesIO(base64.b64decode(base64_data))
            image = Image.open(image_data)

            # 显示图像
            image.show()
        else:
            print("Failed to get data URL, Paper.js might not have rendered correctly.")

        window.destroy()

    return callback

def extract_canvas_to_image():
    # 创建一个无边框、隐藏的 webview 窗口
    return webview.create_window('Paper.js Canvas Renderer', frameless=True, hidden=True)

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