如何用JavaScript在Canvas中展示上传的PSD文件？排查代码问题

问题点分析 #

• 未绑定文件上传事件：你的代码直接使用e.target.result，但根本没给input元素绑定change事件监听，触发不了PSD加载逻辑，e对象本身就不存在。
• Canvas使用方式错误：psd.image.toPng()返回的不是DOM元素，不能用appendChild直接添加到Canvas里。Canvas需要通过上下文的drawImage方法来绘制图片。
• PSD库调用与资源处理问题：
  • 浏览器环境下直接用require('psd')大概率无法正常加载，需确保库已正确引入（比如通过CDN加载umd版本）。
  • PSD.fromURL接收的是URL字符串，虽然e.target.result是dataURL也能使用，但用PSD.fromBuffer处理文件的ArrayBuffer效率更高。

修正后的完整代码 #

HTML部分 #

<input type="file" accept=".psd">
<canvas id="the-canvas"></canvas>

JavaScript部分 #

// 先确保引入psd库，可添加CDN脚本：<script src="https://unpkg.com/psd@3.4.0/dist/psd.min.js"></script>
const input = document.querySelector('input[type="file"]');
const canvas = document.getElementById('the-canvas');
const ctx = canvas.getContext('2d');

input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file || !file.name.endsWith('.psd')) return;

  try {
    // 读取文件为ArrayBuffer
    const arrayBuffer = await file.arrayBuffer();
    // 加载PSD文件
    const psd = await PSD.fromBuffer(arrayBuffer);
    // 获取PNG格式的Blob
    const pngBlob = await psd.image.toPng();
    // 转换为图片对象
    const img = new Image();
    img.onload = () => {
      // 设置Canvas尺寸匹配图片
      canvas.width = img.width;
      canvas.height = img.height;
      // 在Canvas上绘制图片
      ctx.drawImage(img, 0, 0);
    };
    img.src = URL.createObjectURL(pngBlob);
  } catch (error) {
    console.error('处理PSD出错:', error);
  }
});

关键修正说明 #

• 给input添加change事件监听，能正确获取用户选择的PSD文件。
• 使用File.arrayBuffer()读取文件内容，配合PSD.fromBuffer加载PSD，比dataURL方式更高效。
• 将PSD转换得到的PNG Blob转为图片对象，等图片加载完成后再通过drawImage绘制到Canvas上。
• 设置Canvas宽高与图片一致，避免绘制时出现拉伸变形。

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