在Pywebview应用中正确渲染Paper.js图形：库加载与最佳实践

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

<!-- 原始加载方式 (可能无法在pywebview中工作) -->
<!-- <script type="text/javascript" src="js/paper.js"></script> -->

<!-- 推荐的CDN加载方式 -->
<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绘制图形，并将其提取为PIL图像。
    """
    color = 'red'

    def callback(window):
        # 1. 设置HTML内容，通过CDN加载Paper.js库和创建canvas元素
        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代码
        #    pywebview的evaluate_js通常在DOM准备好后执行，因此Paper.js库应已加载。
        js_code = f"""
                // 获取canvas元素并初始化Paper.js项目
                var canvas = document.getElementById("myCanvas");
                paper.setup(canvas); 

                // 定义路径的起始点和结束点
                var start = new paper.Point({path[0][0]}, {path[0][1]});
                var end = new paper.Point({path[0][0] + 1}, {path[0][1]}); // 至少需要两个点才能形成路径

                // 创建并配置Paper.js路径对象
                var path = new paper.Path({{
                    segments: [start, end],
                    strokeColor: '{color}',
                    strokeCap: 'round',
                    strokeJoin: 'round',
                    strokeWidth: 10
                }});
                path.add(new paper.Point(200, 200)); // 添加另一个点以形成更复杂的路径

                // 将路径添加到当前活动图层并强制重绘视图
                paper.project.activeLayer.addChild(path); 
                paper.view.draw(); 

                // 返回一个标识，表明JS执行成功，便于Python端判断
                'Paper.js drawing complete'; 
                """

        print("Executing JavaScript for drawing...")
        js_result = window.evaluate_js(js_code)
        print(f"JavaScript execution result: {js_result}")

        # 3. 提取canvas内容为Data URL
        data_url = window.evaluate_js("canvas.toDataURL()")
        print(f"Data URL obtained: {data_url[:50]}...") # 打印部分URL以避免过长

        # 4. 从Data URL中提取base64编码的图像数据
        base64_data = data_url.split(",")[1]

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

        # 6. 显示图像并销毁webview窗口
        image.show()
        window.destroy()
    return callback


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


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