解决Pywebview中Paper.js画布渲染失败问题：CDN加载策略与实践

<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绘制图形，并将其导出为PIL图片。
    """
    color = 'red'

    def callback(window):
        # 使用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"""
                // 获取canvas元素
                var canvas = document.getElementById("myCanvas");
                // 初始化Paper.js项目，并将其与canvas元素关联
                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 Path对象
                var path = new paper.Path({{
                    segments: [start, end], // 路径的初始线段
                    strokeColor: '{color}',  // 描边颜色
                    strokeCap: 'round',      // 线段端点样式
                    strokeJoin: 'round',     // 线段连接处样式
                    strokeWidth: 10          // 描边宽度
                }});

                // 添加更多点以形成更复杂的路径，例如一个折线
                path.add(new paper.Point(200, 200));
                path.add(new paper.Point(150, 300));
                path.add(new paper.Point(100, 200));

                // 将路径添加到当前活跃图层，使其在画布上可见
                paper.project.activeLayer.addChild(path);

                // 强制视图重绘以显示图形
                paper.view.draw();

                // 返回画布的Data URL，用于导出图片
                canvas.toDataURL();
                """

        print("执行Paper.js绘图代码...")
        # evaluate_js会执行JS代码，并返回最后一条语句的结果
        data_url = window.evaluate_js(js_code)
        print(f"获取到的Data URL: {data_url[:50]}...") # 打印部分URL，避免过长

        if not data_url or "data:image" not in data_url:
            print("错误：未能从画布获取有效的Data URL，可能Paper.js未成功渲染。")
            window.destroy()
            return

        # 从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()
        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()
    # 启动pywebview，并在窗口加载完成后执行回调函数
    webview.start(extract_image(400, 400), window)