React项目中使用ag-psd模块为PSD指定图层添图报错解决方案

错误原因 #

执行setMockupPreview(newPsd.canvas.toDataURL())时出错，核心问题是writePsd(psd)的返回值是PSD格式的二进制数据（Blob/Buffer），并非带有canvas属性的PSD对象，所以调用newPsd.canvas会触发“读取undefined的canvas属性”的错误。另外你代码里直接修改图层canvas的宽高，会破坏原PSD的图层结构，也可能导致后续渲染异常。

修正后的代码 #

const replacelayerName = 'replace';
const replacelayer = psd.children.find((child) => child.name === replacelayerName);

if (replacelayer && replacelayer.canvas) {
    const myImage = await loadImage(URL.createObjectURL(imageFile));
    const ctx = replacelayer.canvas.getContext('2d');
    
    // 清空原图层内容
    ctx.clearRect(0, 0, replacelayer.canvas.width, replacelayer.canvas.height);
    // 按原图层尺寸缩放绘制图片，避免变形
    ctx.drawImage(myImage, 0, 0, replacelayer.canvas.width, replacelayer.canvas.height);
    
    // 重新渲染整个PSD到canvas用于预览
    const previewCanvas = document.createElement('canvas');
    renderPsd(psd, { canvas: previewCanvas });
    setMockupPreview(previewCanvas.toDataURL());
}

关键说明 #

1. 不要用writePsd的返回值做预览：writePsd仅用于生成可保存的PSD二进制文件，和预览用的canvas无关。
2. 保持原图层尺寸：直接修改图层canvas宽高会打乱PSD的图层布局，应该通过缩放图片适配原图层尺寸。
3. 用renderPsd生成预览：修改图层后，调用ag-psd的renderPsd方法，把整个PSD重新渲染到新canvas上，再获取dataURL。

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