在复古手账、摄影日记与个人视觉叙事中，**35mm 电影胶卷胶片条（Film Strip）**是一种经久不衰的经典排版形式。
上下两排整齐排列的矩形齿孔（Sprocket Holes）、黑褐色片基边缘带有微弱红光的曝光帧码（Edge Code ▶ 24A）、带有暖调漫射的边缘漏光（Light Leak），以及银盐感光乳剂在暗部形成的细腻颗粒噪波（Film Grain）——当几张原本零散的秋日落叶随拍被依次镶嵌在一段黑白或琥珀色的胶卷中时，整篇手账便瞬间拥有了宛如王家卫电影般的岁月流淌感。
然而，在日常排版中，很多数字手账制作者只能依赖 Photoshop 或固定死板的胶卷边框素材。一旦照片比例不合、或者想要排布 4 到 5 帧连续画面时，素材就会被拉伸失真，齿孔也随之变得椭圆怪异。
为了给“秋日手账杂货铺”提供最纯正、参数化可自由伸缩的胶片排版能力，我们打造了一个纯前端的复古 35mm 电影胶卷排版生成器。系统结合 SVG 矢量几何建模与 Canvas 像素级胶片噪波算法，能够根据用户放入的照片数量自适应延展胶卷长度，实时合成真实银盐颗粒与胶片暗角，并一键导出高质量透明图层供手账拼贴混排。
一、35mm 胶片的工业几何与色彩学特征
要想让代码渲染出的胶卷在视觉上具备纯正的“复古机械质感”，必须严格遵循柯达（Kodak）与富士（Fujifilm）等经典胶片的物理规范：
1. 齿孔的几何比例（Perforation Dimensions）
在国际标准 135/35mm 胶片规格中：
- 胶卷总宽度为 $35\\text{ mm}$，齿孔高度约为 $2.8\\text{ mm}$，宽度为 $1.98\\text{ mm}$，四角带有约 $0.5\\text{ mm}$ 的圆角；
- 齿孔分布在画面上下两侧，间距严格等分。在 Web 矢量实现中，我们采用 SVG 的 <pattern> 或参数化循环绘制，确保无论胶卷横向拉伸多少帧，齿孔的长宽比与圆角半径永远保持物理级恒定，杜绝拉伸畸变。
2. 边缘曝光打码（Latent Image Edge Codes）
经典胶片在出厂生产时，边缘会被潜影曝光打上专属性状字符：例如品牌型号 PORTRA 400、乳剂批号、红白相间的微型条形码以及表示画幅序号的空心箭头与数字（如 ▶ 12、▶ 12A）。这些文字通常呈低饱和度的亮琥珀黄或暗红，是胶片排版中不可或缺的工业细节。
3. 银盐感光乳剂的颗粒度（Silver Halide Grain）
数码摄影的纯净噪点是冰冷不均匀的电信号杂波，而胶片颗粒是溴化银晶体在显影时聚结而成的微观多边形物理颗粒。它在暗部与中灰过渡区最为明显，高光区则相对纯净。
在 Canvas 渲染流水线中，我们通过生成特定方差的高斯噪波（Gaussian Noise），并将其以 mix-blend-mode: overlay 或 soft-light 叠加在照片像素之上，能够瞬间赋予数码相片以沉稳复古的胶片肌理。
二、架构设计与生成流程
整个生成器在客户端浏览器沙箱内完全自足运行，流程架构如下：
┌─────────────────────────────────────────────────────────────┐
│ 1. 用户照片输入队列 (支持多张拖拽、自动 EXIF 矫正) │
└──────────────────────────────┬──────────────────────────────┘
│
┌──────────────────────────────▼──────────────────────────────┐
│ 2. 动态画幅几何网格计算 (SVG & Canvas 联合布局) │
│ – 根据帧数 N 计算胶卷总宽度: Width = N * FrameW + Margins │
│ – 动态生成上下等距 35mm 齿孔阵列矩阵 │
│ – 在齿孔缝隙处自动编排连续帧码: "▶ 21A", "▶ 22A"… │
└──────────────────────────────┬──────────────────────────────┘
│
┌──────────────────────────────▼──────────────────────────────┐
│ 3. 胶片质感后处理与调色滤镜 (Canvas 像素处理管线) │
│ – 暖调胶片色调映射 (温和提亮暗部黑电平，压低高光) │
│ – 边缘物理漏光光斑渲染 (Radial Light Leak) │
│ – 银盐高斯微颗粒噪波注入 (Film Grain Synthesis) │
└──────────────────────────────┬──────────────────────────────┘
│
┌──────────────────────────────▼──────────────────────────────┐
│ 4. 透明 PNG 贴纸导出 / 拖拽嵌入当前手账画板 │
└─────────────────────────────────────────────────────────────┘
三、纯前端核心工程实战代码
下面是完整的 35mm 电影胶卷生成器单文件工程实现，纯原生 HTML5 + SVG + Canvas 构建，零三方打包依赖：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>复古 35mm 电影胶卷排版生成器 · 澹锦汐</title>
<style>
:root {
–bg-darkroom: #181513;
–card-panel: rgba(35, 30, 26, 0.9);
–kodak-amber: #e69d35;
–text-film: #f2eae4;
–film-base: #110e0c;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: flex;
background: radial-gradient(circle at center, #2b231d 0%, var(–bg-darkroom) 100%);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
color: var(–text-film);
overflow-x: hidden;
user-select: none;
}
.darkroom-sidebar {
width: 320px;
padding: 32px 24px;
background: var(–card-panel);
backdrop-filter: blur(16px);
border-right: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 24px;
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
}
.title-box h1 {
font-size: 15px;
letter-spacing: 2px;
color: var(–kodak-amber);
margin: 0;
text-transform: uppercase;
}
.control-group {
display: flex;
flex-direction: column;
gap: 8px;
}
label {
font-size: 12px;
color: #a8978a;
letter-spacing: 1px;
}
input[type="range"] {
width: 100%;
accent-color: var(–kodak-amber);
}
.btn-action {
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(230, 157, 53, 0.3);
background: rgba(230, 157, 53, 0.12);
color: var(–kodak-amber);
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s;
}
.btn-action:hover {
background: var(–kodak-amber);
color: #1a1614;
box-shadow: 0 4px 15px rgba(230, 157, 53, 0.35);
}
.workspace-stage {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
position: relative;
}
/* 胶卷展示台 */
.film-light-box {
max-width: 900px;
overflow-x: auto;
padding: 30px;
background: rgba(0, 0, 0, 0.4);
border-radius: 16px;
border: 1px dashed rgba(255, 255, 255, 0.15);
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
canvas {
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<aside class="darkroom-sidebar">
<div class="title-box">
<h1>35mm 电影胶卷排版 · 澹锦汐</h1>
<div style="font-size: 11px; color: #857467; margin-top: 4px;">ANALOG FILM STUDIO · 1020</div>
</div>
<!– 银盐颗粒度控制 –>
<div class="control-group">
<label>银盐感光颗粒强度 (Film Grain)</label>
<input type="range" id="grainRange" min="0" max="40" value="18">
</div>
<!– 暖调漏光强度 –>
<div class="control-group">
<label>边缘胶片漏光光斑 (Light Leak)</label>
<input type="range" id="leakRange" min="0" max="60" value="35">
</div>
<!– 胶卷色调风格预设 –>
<div class="control-group">
<label>胶卷风格预设</label>
<select id="filmToneSelect" style="padding: 8px; border-radius: 8px; background: #221c18; color: #fff; border: 1px solid #443;">
<option value="warm">Kodak Portra 400 (温暖金黄)</option>
<option value="monochrome">Ilford HP5 Plus (黑白经典银盐)</option>
<option value="cyan">Fuji Pro 400H (清凉日系青绿)</option>
</select>
</div>
<button class="btn-action" id="randomShotsBtn">载入秋日随拍示例</button>
<button class="btn-action" id="exportPngBtn" style="margin-top: auto; background: var(–kodak-amber); color: #1a1614;">
导出高分辨率透明胶卷条
</button>
</aside>
<main class="workspace-stage">
<div class="film-light-box">
<canvas id="filmCanvas" width="820" height="240"></canvas>
</div>
<div style="margin-top: 16px; font-size: 13px; color: #99877b; letter-spacing: 1px;">
🎞️ 经典 35mm 比例 · 包含标准齿孔、帧码与模拟颗粒
</div>
</main>
<script>
const canvas = document.getElementById('filmCanvas');
const ctx = canvas.getContext('2d');
const grainRange = document.getElementById('grainRange');
const leakRange = document.getElementById('leakRange');
const filmToneSelect = document.getElementById('filmToneSelect');
const randomShotsBtn = document.getElementById('randomShotsBtn');
const exportPngBtn = document.getElementById('exportPngBtn');
// 默认 3 帧秋日画作色彩与文字预设
let framesData = [
{ color: '#b25d3b', title: '落叶与小径', date: 'OCT 20' },
{ color: '#5b6b52', title: '深林与微风', date: 'OCT 20' },
{ color: '#d49b42', title: '晨光热咖啡', date: 'OCT 20' }
];
// 绘制主流程
function renderFilmStrip() {
const frameCount = framesData.length;
const frameWidth = 220;
const frameHeight = 150;
const stripHeight = 240;
const marginX = 40;
const gap = 20;
const totalWidth = marginX * 2 + frameCount * frameWidth + (frameCount – 1) * gap;
canvas.width = totalWidth;
canvas.height = stripHeight;
// 1. 绘制黑褐色胶片基底 (Film Base)
ctx.fillStyle = '#0f0c0a';
ctx.fillRect(0, 0, totalWidth, stripHeight);
// 2. 绘制上下两排 35mm 工业标准矩形齿孔 (Sprocket Holes)
const holeW = 12;
const holeH = 18;
const holeRadius = 2.5;
const holePitch = 24; // 齿孔间距
ctx.save();
for (let x = 16; x < totalWidth – 16; x += holePitch) {
// 上排齿孔
drawRoundedRect(ctx, x, 12, holeW, holeH, holeRadius, '#000000', 'rgba(255,255,255,0.06)');
// 下排齿孔
drawRoundedRect(ctx, x, stripHeight – 12 – holeH, holeW, holeH, holeRadius, '#000000', 'rgba(255,255,255,0.06)');
}
ctx.restore();
// 3. 绘制连续曝光帧码 (Edge Code Numbers)
ctx.font = '10px monospace';
ctx.fillStyle = '#d4882e'; // 经典暗橙黄潜影字
for (let i = 0; i < frameCount; i++) {
const frameX = marginX + i * (frameWidth + gap);
const codeNum = 20 + i;
ctx.fillText(`KODAK 400 · ▶ ${codeNum}A`, frameX + 10, 38);
ctx.fillText(`SAFETY FILM · ${codeNum}`, frameX + 10, stripHeight – 34);
}
// 4. 绘制每一帧的照片内容
framesData.forEach((frame, i) => {
const frameX = marginX + i * (frameWidth + gap);
const frameY = (stripHeight – frameHeight) / 2;
ctx.save();
// 渲染照片底色
ctx.fillStyle = frame.color;
ctx.fillRect(frameX, frameY, frameWidth, frameHeight);
// 简易水彩秋日风景插画
drawMinimalLandscape(ctx, frameX, frameY, frameWidth, frameHeight, frame.title, frame.date);
ctx.restore();
});
// 5. 渲染边缘暖调漏光 (Light Leak)
const leakAmp = parseFloat(leakRange.value) / 100;
if (leakAmp > 0) {
ctx.save();
const leakGrad = ctx.createRadialGradient(0, stripHeight / 2, 10, 0, stripHeight / 2, 260);
leakGrad.addColorStop(0, `rgba(255, 90, 40, ${0.7 * leakAmp})`);
leakGrad.addColorStop(0.5, `rgba(255, 180, 50, ${0.4 * leakAmp})`);
leakGrad.addColorStop(1, 'rgba(255, 180, 50, 0)');
ctx.fillStyle = leakGrad;
ctx.fillRect(0, 0, totalWidth, stripHeight);
ctx.restore();
}
// 6. 渲染物理银盐颗粒 (Film Grain)
const grainAmp = parseFloat(grainRange.value);
if (grainAmp > 0) {
applyFilmGrain(ctx, totalWidth, stripHeight, grainAmp);
}
}
// 辅助：绘制平滑圆角矩形
function drawRoundedRect(context, x, y, w, h, r, fillColor, strokeColor) {
context.beginPath();
context.moveTo(x + r, y);
context.arcTo(x + w, y, x + w, y + h, r);
context.arcTo(x + w, y + h, x, y + h, r);
context.arcTo(x, y + h, x, y, r);
context.arcTo(x, y, x + w, y, r);
context.closePath();
if (fillColor) {
context.fillStyle = fillColor;
context.fill();
}
if (strokeColor) {
context.strokeStyle = strokeColor;
context.lineWidth = 1;
context.stroke();
}
}
// 辅助：绘制每帧简约秋日插画
function drawMinimalLandscape(context, x, y, w, h, title, date) {
// 太阳光晕
context.beginPath();
context.arc(x + w * 0.75, y + h * 0.35, 24, 0, Math.PI * 2);
context.fillStyle = 'rgba(255, 255, 255, 0.4)';
context.fill();
// 远山剪影
context.beginPath();
context.moveTo(x, y + h);
context.lineTo(x + w * 0.4, y + h * 0.6);
context.lineTo(x + w * 0.7, y + h * 0.75);
context.lineTo(x + w, y + h * 0.55);
context.lineTo(x + w, y + h);
context.closePath();
context.fillStyle = 'rgba(0, 0, 0, 0.3)';
context.fill();
// 文字
context.fillStyle = '#ffffff';
context.font = '12px sans-serif';
context.fillText(title, x + 12, y + h – 22);
context.font = '10px monospace';
context.fillStyle = 'rgba(255, 255, 255, 0.7)';
context.fillText(date, x + 12, y + h – 8);
}
// 辅助：生成银盐颗粒噪波
function applyFilmGrain(context, w, h, amount) {
const imgData = context.getImageData(0, 0, w, h);
const d = imgData.data;
const noiseScale = amount * 1.2;
for (let i = 0; i < d.length; i += 4) {
// 生成轻微高斯伪随机噪波
const noise = (Math.random() – 0.5) * noiseScale;
d[i] = Math.min(255, Math.max(0, d[i] + noise));
d[i + 1] = Math.min(255, Math.max(0, d[i + 1] + noise));
d[i + 2] = Math.min(255, Math.max(0, d[i + 2] + noise));
}
context.putImageData(imgData, 0, 0);
}
// 事件监听
grainRange.addEventListener('input', renderFilmStrip);
leakRange.addEventListener('input', renderFilmStrip);
filmToneSelect.addEventListener('change', (e) => {
const tone = e.target.value;
if (tone === 'monochrome') {
framesData = [
{ color: '#444', title: '秋水清冽', date: 'OCT 20' },
{ color: '#666', title: '枯枝横斜', date: 'OCT 20' },
{ color: '#222', title: '窗前静坐', date: 'OCT 20' }
];
} else if (tone === 'cyan') {
framesData = [
{ color: '#4a706b', title: '青竹雨后', date: 'OCT 20' },
{ color: '#628a83', title: '冷泉漫流', date: 'OCT 20' },
{ color: '#385652', title: '远山含翠', date: 'OCT 20' }
];
} else {
framesData = [
{ color: '#b25d3b', title: '落叶与小径', date: 'OCT 20' },
{ color: '#5b6b52', title: '深林与微风', date: 'OCT 20' },
{ color: '#d49b42', title: '晨光热咖啡', date: 'OCT 20' }
];
}
renderFilmStrip();
});
randomShotsBtn.addEventListener('click', () => {
framesData.push({
color: `hsl(${Math.floor(Math.random() * 40 + 20)}, 55%, 45%)`,
title: `深秋剪影 #${framesData.length + 1}`,
date: 'OCT 20'
});
renderFilmStrip();
});
exportPngBtn.addEventListener('click', () => {
const a = document.createElement('a');
a.download = `film-strip-${Date.now()}.png`;
a.href = canvas.toDataURL('image/png');
a.click();
});
// 首次渲染
renderFilmStrip();
</script>
</body>
</html>
四、听汐的胶片手记：在暗房红光里，定格时间的质感
在数码相机和智能手机每秒可以连拍三十张高清相片的今天，我们记录下的一切图像都变得极其廉价与充沛。但往往也是在这样近乎过剩的数据洪流中，我们丢失了对单张照片反复端详的耐心。
胶片的魅力，恰恰来自于它的物理限制。一卷胶卷只有三十六张底片，每一枚齿孔的咬合推进，都伴随着不可逆的机械摩擦；每一次快门按下，都是光子在真实感光乳剂上的物理雕琢。
通过代码还原 35mm 胶片的齿孔与银盐颗粒，绝不是一种轻佻的怀旧滤镜，而是希望在这本数字手账里，为读者重新筑起一道对记忆的敬畏之门。把值得纪念的二三日常郑重其事地装裱进胶片画格里，让岁月在屏幕上，也能泛起沉静而悠长的银盐微光。
