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. 修改：使用CDN加载Paper.js库
        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>
            """

        js_code = f"""
                // 等待Paper.js加载完毕并设置画布
                // 由于Paper.js是异步加载的，这里需要确保它已准备好
                // 实际应用中可能需要更健壮的加载检测机制
                if (typeof paper === 'undefined') {{
                    console.error('Paper.js is not loaded!');
                    return;
                }}
                var canvas = document.getElementById("myCanvas");
                paper.setup(canvas); // 初始化Paper.js项目，关联到canvas

                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();
                """

        print("执行的JavaScript代码:")
        print(js_code)

        # 2. 执行JavaScript代码并获取结果
        js_result = window.evaluate_js(js_code)
        print(f"JavaScript执行结果: {js_result}")

        # 3. 从Canvas获取Data URL
        data_url = window.evaluate_js("canvas.toDataURL()")
        print(f"Data URL: {data_url[:50]}...") # 打印部分URL，避免过长

        # 4. 提取Base64编码的图片数据
        if data_url and "," in data_url:
            base64_data = data_url.split(",")[1]
            image_data = io.BytesIO(base64.b64decode(base64_data))
            image = Image.open(image_data)
            image.show() # 显示图片
        else:
            print("未能获取有效的Data URL，可能Canvas为空或JS执行失败。")

        window.destroy() # 销毁窗口

    return callback

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

if __name__ == '__main__':
    window = create_webview_window()
    # 启动pywebview，并传入回调函数和窗口对象
    webview.start(extract_image(400, 400), window)