当前位置：首页 > JavaScript

js实现psd文件预览

2026-01-31 01:56:38JavaScript

使用PSD.js库解析PSD文件

PSD.js是一个纯JavaScript库，可以在浏览器或Node.js环境中解析PSD文件。该库能提取图层信息、文本内容、缩略图等数据。

安装方式：

npm install psd

基础用法示例：

const PSD = require('psd');
const psd = PSD.fromFile("path/to/file.psd");
psd.parse();

console.log(psd.tree().export());
const thumbnail = psd.image.toPng();

浏览器端实现方案

在浏览器中可通过File API读取用户上传的PSD文件，结合PSD.js解析后渲染到Canvas：

document.getElementById('psd-upload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    const psd = PSD.fromDump(e.target.result);
    psd.parse();

    const canvas = document.createElement('canvas');
    document.body.appendChild(canpsd.image.toCanvas(canvas));
  };

  reader.readAsArrayBuffer(file);
});

使用WebAssembly加速解析

对于大型PSD文件，可以考虑使用WebAssembly版本的解析器提高性能：

import { loadPSD } from '@webtoon/psd-ts';

const result = await loadPSD(psdFileBuffer);
const canvas = result.canvas;
document.body.appendChild(canvas);

服务端渲染方案

在Node.js环境中可以生成预览图后返回给前端：

const fs = require('fs');
const PSD = require('psd');

const psd = PSD.fromFile("design.psd");
psd.parse();

psd.image.saveAsPng('preview.png').then(() => {
  console.log('Preview generated');
});

性能优化建议

处理大型PSD文件时应该分块加载，避免主线程阻塞。可以使用Web Worker进行后台解析：

// worker.js
self.importScripts('psd.js');
self.onmessage = function(e) {
  const psd = PSD.fromDump(e.data);
  psd.parse();
  postMessage(psd.image.toPng());
};

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(arrayBuffer);
worker.onmessage = function(e) {
  const img = new Image();
  img.src = URL.createObjectURL(new Blob([e.data]));
  document.body.appendChild(img);
};

替代方案：使用PSD转PNG服务

对于不需要完整解析的场景，可以使用云服务API直接转换PSD为可预览格式：

fetch('https://api.psdconverter.com', {
  method: 'POST',
  body: formData
})
.then(response => response.blob())
.then(blob => {
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
});