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)
This commit is contained in:
Warren
+315
@@ -0,0 +1,315 @@
|
||||
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}×{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
Block a user