PyScript+Bokeh回调处理图片时Pillow灰度转换失效问题

核心问题 #

Bokeh回调中调用PIL转换灰度图时崩溃，本质是**localStorage取出的内容未正确反序列化为PIL Image对象**，且JS与Python对象转换存在隐式问题，导致img.convert('L')执行失败。回调外能正常工作是因为该场景下对象转换逻辑完整，而回调内缺失了关键的反序列化步骤。

1. 修复localStorage存储与读取逻辑 #

localStorage仅支持存储字符串，因此存入Image对象时需先序列化为Base64字符串，取出时再反序列化为PIL Image：

存入Image到localStorage的代码

import base64
import io

# 假设你有一个PIL Image对象`original_img`
buffer = io.BytesIO()
original_img.save(buffer, format='PNG')
img_base64 = base64.b64encode(buffer.getvalue()).decode('utf-8')
localStorage.setItem('key', img_base64)

回调中读取并反序列化的代码

修改回调函数，添加反序列化步骤并增加异常捕获：

def callback(attr, old, new):
    try:
        div.text = f'Symbol is: {new}'
        first_item = localStorage.getItem('key')
        # 反序列化为PIL Image
        img_data = base64.b64decode(first_item)
        img = Image.open(io.BytesIO(img_data))
        
        my_image = imageToBinary(img)
        print(my_image)
        rs_img = convertBintoRS(my_image,8)
        rs_img = encodeRS(rs_img, 5, 6)
        rs_img = seperate_img(rs_img,5+6,5)
        rs_img = RStoBinary(rs_img,8)
        rs_img = binaryToImage(rs_img)
        display_image(rs_img,"reed_s")
    except Exception as e:
        console.log(f"回调错误: {str(e)}")
        print(f"回调错误: {str(e)}")

2. 优化imageToBinary函数 #

用numpy向量化操作替代嵌套循环，提升效率同时避免索引错误：

def imageToBinary(img):
    print('enter imageToBinary')
    img = img.convert('L')
    print('convert to greyscale')
    img_np = np.array(img, dtype=np.uint8)
    print('convert numpy')
    # 向量化操作替代循环
    img_np = np.where(img_np < 128, 0, 1).astype(np.uint8)
    print('success')
    return img_np

3. 关键原因说明 #

• localStorage取出的是字符串而非PIL Image对象，直接传入imageToBinary会导致convert('L')在非Image对象上执行，触发崩溃。
• PyScript中JS与Python对象的隐式转换存在限制，必须显式处理序列化/反序列化流程，回调外正常工作是因为该场景下对象转换逻辑完整。

内容的提问来源于stack exchange，提问作者Liam