warren/telfax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d1e92b32fb6d99f1772f2165414b7a86543e85ee
telfax/src/preview.rs
T
Warren d1e92b32fb Add cover page support with Chinese font rendering 
Features:
- Cover page generation using Python/Pillow with Apple PingFang font
- CLI commands: cover-create, job-cover for cover page management
- API endpoints: PUT /api/fax/jobs/{id}/cover for cover modification
- Send fax with cover page: --to, --from, --subject, --note options
- Multi-page TIFF parsing for PDF conversion (fix: all pages now sent)
- Preview HTML generation with pan/zoom support
- OCR verification for cover page content
- Class 2 receive support for incoming faxes

Fixes:
- Modem initialization before Class 2 mode entry
- Dial timeout handling with retry logic
- Multi-page fax transmission between pages
- Chinese character rendering in cover pages (Apple native fonts)
2026-07-02 18:43:16 +08:00

316 lines
9.6 KiB
Rust
Raw Blame History

use crate::document::convert::Page;
use crate::error::Result;
use base64::Engine;
pub fn generate_preview_html(page: &Page, title: &str, output_path: &std::path::Path) -> Result<()> {
let png_data = fax_page_to_png_bytes(page)?;
let b64 = base64::engine::general_purpose::STANDARD.encode(&png_data);
let data_uri = format!("data:image/png;base64,{}", b64);
let w = page.width_pels;
let h = page.rows;
let html = build_viewer_html(&data_uri, w, h, title);
std::fs::write(output_path, html)?;
Ok(())
}
fn fax_page_to_png_bytes(page: &Page) -> Result<Vec<u8>> {
let width = page.width_pels as usize;
let height = page.rows as usize;
let bytes_per_row = (width + 7) / 8;
let mut img_data = Vec::with_capacity(width * height);
for y in 0..height {
for x in 0..width {
let byte_idx = y * bytes_per_row + x / 8;
let bit = (page.pixels[byte_idx] >> (7 - (x % 8))) & 1;
img_data.push(if bit == 1 { 0u8 } else { 255u8 });
}
}
let mut png_bytes = Vec::new();
{
use image::ImageEncoder;
let encoder = image::codecs::png::PngEncoder::new(&mut png_bytes);
encoder
.write_image(&img_data, page.width_pels, page.rows, image::ExtendedColorType::L8)
.map_err(|e| crate::error::FaxError::Other(format!("PNG encode error: {}", e)))?;
}
Ok(png_bytes)
}
fn build_viewer_html(data_uri: &str, width: u32, height: u32, title: &str) -> String {
let html = format!(
r#"<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fax Preview — {title}</title>
<style>
*, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
body {{
background: #2a2a2a; color: #ccc; font-family: system-ui, sans-serif;
overflow: hidden; height: 100vh; display: flex; flex-direction: column;
}}
#toolbar {{
display: flex; align-items: center; gap: 12px; padding: 8px 16px;
background: #3a3a3a; border-bottom: 1px solid #555; user-select: none;
flex-shrink: 0;
}}
#toolbar .title {{ font-weight: 600; color: #fff; margin-right: auto; }}
#toolbar .info {{ font-size: 13px; color: #aaa; }}
#toolbar button {{
background: #555; border: none; color: #fff; padding: 4px 12px;
border-radius: 4px; cursor: pointer; font-size: 13px;
}}
#toolbar button:hover {{ background: #666; }}
#toolbar input[type=range] {{ width: 120px; }}
#canvas-wrap {{
flex: 1; overflow: hidden; position: relative; cursor: grab;
background: #1a1a1a;
background-image: radial-gradient(circle, #333 1px, transparent 1px);
background-size: 24px 24px;
}}
#canvas-wrap:active {{ cursor: grabbing; }}
#canvas-wrap canvas {{ display: block; }}
</style>
</head>
<body>
<div id="toolbar">
<span class="title">{title}</span>
<span class="info" id="info">{width}&times;{height} px</span>
<button id="fit-btn">Fit</button>
<button id="reset-btn">Reset</button>
<label>Zoom: <span id="zoom-label">100</span>%</label>
<input type="range" id="zoom-slider" min="10" max="400" value="100" step="5">
</div>
<div id="canvas-wrap">
<canvas id="canvas"></canvas>
</div>
<script>
const img = new Image();
const dataUri = {data_uri_str};
img.onload = init;
img.src = dataUri;
const PAGE_W = {width}, PAGE_H = {height};
const BORDER = 16;
const MARK_LEN = 20;
let scale = 1, offsetX = 0, offsetY = 0;
let dragStartX = 0, dragStartY = 0, dragOffX = 0, dragOffY = 0, dragging = false;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const wrap = document.getElementById('canvas-wrap');
const zoomSlider = document.getElementById('zoom-slider');
const zoomLabel = document.getElementById('zoom-label');
function resize() {{
canvas.width = wrap.clientWidth;
canvas.height = wrap.clientHeight;
draw();
}}
function draw() {{
const cw = canvas.width, ch = canvas.height;
ctx.clearRect(0, 0, cw, ch);
const pw = PAGE_W * scale;
const ph = PAGE_H * scale;
const ox = offsetX + (cw - pw) / 2;
const oy = offsetY + (ch - ph) / 2;
ctx.fillStyle = '#1a1a1a';
ctx.fillRect(0, 0, cw, ch);
ctx.save();
ctx.translate(ox, oy);
// shadow
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 12;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 4;
// page background
ctx.fillStyle = '#fff';
ctx.fillRect(-BORDER, -BORDER, pw + BORDER*2, ph + BORDER*2);
ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;
// page image
if (img.complete) {{
ctx.drawImage(img, 0, 0, pw, ph);
}}
// boundary: thick border
ctx.strokeStyle = '#e53935';
ctx.lineWidth = 3;
ctx.strokeRect(0, 0, pw, ph);
// corner crop marks (outer)
const cm = MARK_LEN * scale;
ctx.strokeStyle = '#e53935';
ctx.lineWidth = 2;
ctx.beginPath();
// top-left
ctx.moveTo(-BORDER*0.5, -cm); ctx.lineTo(-BORDER*0.5, -BORDER*0.5); ctx.lineTo(-cm, -BORDER*0.5);
// top-right
ctx.moveTo(pw + BORDER*0.5, -cm); ctx.lineTo(pw + BORDER*0.5, -BORDER*0.5); ctx.lineTo(pw + cm, -BORDER*0.5);
// bottom-left
ctx.moveTo(-BORDER*0.5, ph + cm); ctx.lineTo(-BORDER*0.5, ph + BORDER*0.5); ctx.lineTo(-cm, ph + BORDER*0.5);
// bottom-right
ctx.moveTo(pw + BORDER*0.5, ph + cm); ctx.lineTo(pw + BORDER*0.5, ph + BORDER*0.5); ctx.lineTo(pw + cm, ph + BORDER*0.5);
ctx.stroke();
// alignment marks at midpoints
ctx.strokeStyle = 'rgba(229, 57, 53, 0.4)';
ctx.lineWidth = 1;
ctx.setLineDash([4, 4]);
ctx.beginPath();
// top
ctx.moveTo(pw/2, -MARK_LEN*0.5*scale); ctx.lineTo(pw/2, -BORDER*0.5);
// bottom
ctx.moveTo(pw/2, ph + MARK_LEN*0.5*scale); ctx.lineTo(pw/2, ph + BORDER*0.5);
// left
ctx.moveTo(-MARK_LEN*0.5*scale, ph/2); ctx.lineTo(-BORDER*0.5, ph/2);
// right
ctx.moveTo(pw + MARK_LEN*0.5*scale, ph/2); ctx.lineTo(pw + BORDER*0.5, ph/2);
ctx.stroke();
ctx.setLineDash([]);
// DPI scale bar (bottom-right)
const dpi = 204;
const inchPx = dpi * scale;
const barInches = 2;
const barLen = inchPx * barInches;
const barX = pw - 40*scale - barLen;
const barY = ph - 30*scale;
ctx.strokeStyle = '#666';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(barX, barY); ctx.lineTo(barX + barLen, barY);
ctx.moveTo(barX, barY - 4*scale); ctx.lineTo(barX, barY + 4*scale);
ctx.moveTo(barX + barLen, barY - 4*scale); ctx.lineTo(barX + barLen, barY + 4*scale);
ctx.stroke();
ctx.fillStyle = '#666';
ctx.font = `${{10*scale}}px sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText(`${{barInches}} in (@ ${{dpi}} DPI)`, barX + barLen/2, barY + 4*scale);
ctx.restore();
// overlay info
const zoomPct = Math.round(scale * 100);
document.getElementById('zoom-label').textContent = zoomPct;
}}
// mouse pan
canvas.addEventListener('mousedown', (e) => {{
dragging = true;
dragStartX = e.clientX;
dragStartY = e.clientY;
dragOffX = offsetX;
dragOffY = offsetY;
}});
window.addEventListener('mousemove', (e) => {{
if (!dragging) return;
offsetX = dragOffX + (e.clientX - dragStartX);
offsetY = dragOffY + (e.clientY - dragStartY);
draw();
}});
window.addEventListener('mouseup', () => {{ dragging = false; }});
// touch pan
canvas.addEventListener('touchstart', (e) => {{
if (e.touches.length === 1) {{
dragging = true;
dragStartX = e.touches[0].clientX;
dragStartY = e.touches[0].clientY;
dragOffX = offsetX;
dragOffY = offsetY;
}}
}});
canvas.addEventListener('touchmove', (e) => {{
if (!dragging || e.touches.length !== 1) return;
e.preventDefault();
offsetX = dragOffX + (e.touches[0].clientX - dragStartX);
offsetY = dragOffY + (e.touches[0].clientY - dragStartY);
draw();
}});
canvas.addEventListener('touchend', () => {{ dragging = false; }});
// zoom with wheel
canvas.addEventListener('wheel', (e) => {{
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const mx = e.clientX - rect.left;
const my = e.clientY - rect.top;
const cw = canvas.width, ch = canvas.height;
const ox = offsetX + (cw - PAGE_W * scale) / 2;
const oy = offsetY + (ch - PAGE_H * scale) / 2;
const px = (mx - ox) / scale;
const py = (my - oy) / scale;
const factor = e.deltaY < 0 ? 1.1 : 0.9;
const newScale = Math.min(4, Math.max(0.1, scale * factor));
scale = newScale;
offsetX = mx - px * scale - (cw - PAGE_W * scale) / 2;
offsetY = my - py * scale - (ch - PAGE_H * scale) / 2;
zoomSlider.value = Math.round(scale * 100);
draw();
}});
// zoom slider
zoomSlider.addEventListener('input', () => {{
const newScale = parseInt(zoomSlider.value) / 100;
const cw = canvas.width, ch = canvas.height;
const cx = cw / 2, cy = ch / 2;
const ox = offsetX + (cw - PAGE_W * scale) / 2;
const oy = offsetY + (ch - PAGE_H * scale) / 2;
const px = (cx - ox) / scale;
const py = (cy - oy) / scale;
scale = newScale;
offsetX = cx - px * scale - (cw - PAGE_W * scale) / 2;
offsetY = cy - py * scale - (ch - PAGE_H * scale) / 2;
draw();
}});
document.getElementById('fit-btn').addEventListener('click', () => {{
const cw = canvas.width, ch = canvas.height;
const s = Math.min((cw - 80) / PAGE_W, (ch - 80) / PAGE_H);
scale = s;
offsetX = 0; offsetY = 0;
zoomSlider.value = Math.round(scale * 100);
draw();
}});
document.getElementById('reset-btn').addEventListener('click', () => {{
scale = 1; offsetX = 0; offsetY = 0;
zoomSlider.value = 100;
draw();
}});
function init() {{
resize();
fitBtn = document.getElementById('fit-btn');
fitBtn.click();
}}
window.addEventListener('resize', resize);
</script>
</body>
</html>"#,
title = title,
width = width,
height = height,
data_uri_str = serde_json::to_string(data_uri).unwrap(),
);
html
}
Reference in New Issue View Git Blame Copy Permalink