diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css
index 5ec234e..da105f5 100644
--- a/assets/webui/ofdgo.css
+++ b/assets/webui/ofdgo.css
@@ -1666,10 +1666,6 @@ button:not(:disabled):hover {
}
.create-images-row {
- display: grid;
- grid-template-columns: minmax(0, 1fr) auto;
- align-items: center;
- gap: 4px;
margin-bottom: 12px;
}
@@ -1685,12 +1681,6 @@ button:not(:disabled):hover {
}
}
-#createImageCount {
- align-self: start;
- line-height: var(--control-height);
- color: var(--text-muted);
-}
-
#createImageQueue {
margin-bottom: 12px;
}
@@ -1765,11 +1755,22 @@ button:not(:disabled):hover {
font-size: 11px;
}
-.create-image-preview img {
- display: block;
- max-width: 100%;
- max-height: 100%;
+.create-image-paper {
+ display: grid;
+ place-items: center;
+ box-sizing: border-box;
background: #fff;
+ box-shadow: 0 0 0 1px var(--line);
+}
+
+.create-image-paper img {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.create-image-paper[hidden] {
+ display: none;
}
.create-image-details {
diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js
index dd7b0f6..b37bb01 100644
--- a/assets/webui/ofdgo.js
+++ b/assets/webui/ofdgo.js
@@ -508,7 +508,6 @@ const el = {
createImageQueue: document.querySelector("#createImageQueue"),
createImageList: document.querySelector("#createImageList"),
createImageAdd: document.querySelector("#createImageAdd"),
- createImageCount: document.querySelector("#createImageCount"),
createImageOrder: document.querySelector("#createImageOrder"),
createPortrait: document.querySelector("#createPortrait"),
createLandscape: document.querySelector("#createLandscape"),
@@ -1681,6 +1680,7 @@ el.createMode.addEventListener("change", () => {
});
el.createSize.addEventListener("change", applyCreatePaper);
for (const input of [el.createWidth, el.createHeight]) input.addEventListener("input", () => updateCreateDirection(true));
+el.createMargin.addEventListener("input", updateCreateImagePreviews);
for (const radio of [el.createPortrait, el.createLandscape]) radio.addEventListener("change", () => {
[el.createWidth.value, el.createHeight.value] = [el.createHeight.value, el.createWidth.value];
updateCreateDirection();
@@ -3886,6 +3886,7 @@ function updateCreateDirection(matchPaper = false) {
el.createLandscape.checked = valid && width > height;
el.createPortrait.disabled = el.createLandscape.disabled = !valid || width === height || el.createWidth.disabled;
if (matchPaper) el.createSize.value = Object.entries(createPaperSizes).find(([, [w, h]]) => Math.min(width, height) === w && Math.max(width, height) === h)?.[0] || "custom";
+ updateCreateImagePreviews();
}
function releaseCreateImages(tab) {
@@ -3963,7 +3964,6 @@ function renderCreateImages() {
const focused = el.createImageList.contains(document.activeElement);
el.createImageList.replaceChildren();
for (const input of el.createImageOrder.querySelectorAll("input")) input.checked = input.value === queue.order;
- el.createImageCount.textContent = String(queue.entries.length);
if (!queue.entries.some(entry => entry.id === queue.selected)) queue.selected = queue.entries[0]?.id ?? null;
queue.observer = new IntersectionObserver(items => {
for (const item of items) if (item.isIntersecting && isForegroundDocument(tab)) {
@@ -4000,10 +4000,39 @@ function renderCreateImages() {
}
function showCreateImagePreview(entry, row) {
- const image = document.createElement("img");
+ const paper = document.createElement("span"), image = document.createElement("img");
+ paper.className = "create-image-paper";
image.src = entry.url;
image.draggable = false;
- row.querySelector(".create-image-preview").replaceChildren(image);
+ paper.append(image);
+ row.querySelector(".create-image-preview").replaceChildren(paper);
+ layoutCreateImagePreview(entry, row);
+}
+
+function updateCreateImagePreviews() {
+ const queue = state.createImageQueue;
+ if (!queue) return;
+ const entries = new Map(queue.entries.map(entry => [entry.id, entry]));
+ for (const row of el.createImageList.children) {
+ const entry = entries.get(Number(row.dataset.imageId));
+ if (entry?.url && row.querySelector(".create-image-paper")) layoutCreateImagePreview(entry, row);
+ }
+}
+
+function layoutCreateImagePreview(entry, row) {
+ const paper = row.querySelector(".create-image-paper"), image = paper.firstElementChild;
+ const margin = Number(el.createMargin.value), follow = el.createSize.value === "image";
+ const width = follow ? entry.width + 2 * margin : Number(el.createWidth.value);
+ const height = follow ? entry.height + 2 * margin : Number(el.createHeight.value);
+ const valid = Number.isFinite(width + height + margin) && margin >= 0 && width > 2 * margin && height > 2 * margin;
+ paper.hidden = !valid;
+ if (!valid) return;
+ const scale = 46 / Math.max(width, height);
+ const fit = follow ? 1 : Math.min((width - 2 * margin) / entry.width, (height - 2 * margin) / entry.height);
+ paper.style.width = `${width * scale}px`;
+ paper.style.height = `${height * scale}px`;
+ image.style.width = `${entry.width * fit * scale}px`;
+ image.style.height = `${entry.height * fit * scale}px`;
}
async function loadCreateImagePreview(tab, queue, entry) {
@@ -4014,6 +4043,11 @@ async function loadCreateImagePreview(tab, queue, entry) {
const source = entry.file instanceof Blob ? entry.file : new Blob([await entry.file.arrayBuffer()]);
if (tab.state.createImageQueue !== queue || !queue.entries.includes(entry)) return;
bitmap = await createImageBitmap(source, { resizeWidth: 64 });
+ if (tab.closed || tab.state.createImageQueue !== queue || !queue.entries.includes(entry)) return;
+ const size = await callTabWASM(tab, "ofdgoImagePageSize", new Uint8Array(await source.arrayBuffer()));
+ if (tab.state.createImageQueue !== queue || !queue.entries.includes(entry)) return;
+ entry.width = size.width;
+ entry.height = size.height;
const canvas = document.createElement("canvas"), scale = Math.min(64 / bitmap.width, 64 / bitmap.height, 1);
canvas.width = Math.max(1, Math.round(bitmap.width * scale));
canvas.height = Math.max(1, Math.round(bitmap.height * scale));
diff --git a/assets/webui/ofdgo_host.js b/assets/webui/ofdgo_host.js
index 1a0cd5b..dca4778 100644
--- a/assets/webui/ofdgo_host.js
+++ b/assets/webui/ofdgo_host.js
@@ -478,7 +478,7 @@ class BrowserEngine {
"ofdgoLoadPDF", "ofdgoDocumentInfo", "ofdgoDocumentVersions", "ofdgoDocumentNavigation", "ofdgoOpenLinks", "ofdgoOutlineLinks", "ofdgoRenderBackends", "ofdgoSVGFontData",
"ofdgoSearchPage", "ofdgoPageTextString", "ofdgoResources", "ofdgoResourceReferences", "ofdgoResourceTargets",
"ofdgoResourceLocations", "ofdgoFontPreview", "ofdgoFontFaces", "ofdgoFontFace", "ofdgoMatchFontFiles",
- "ofdgoImages", "ofdgoStructureTargets", "ofdgoStructureObjects", "ofdgoPackageDocuments", "ofdgoVerifySignatures",
+ "ofdgoImages", "ofdgoImagePageSize", "ofdgoStructureTargets", "ofdgoStructureObjects", "ofdgoPackageDocuments", "ofdgoVerifySignatures",
"ofdgoAnnotationInfos", "ofdgoInvoices", "ofdgoInvoice", "ofdgoExportInvoice", "ofdgoValidateInvoice",
"ofdgoActionList", "ofdgoPageSettings", "ofdgoReadAnnotation", "ofdgoPreviewSignatureSeal",
"ofdgoExportFormats", "ofdgoOutputFormats", "ofdgoParsePageRange", "ofdgoExportPage", "ofdgoExportDocument",
diff --git a/internal/webui/webui.go b/internal/webui/webui.go
index 7c63981..a9a522e 100644
--- a/internal/webui/webui.go
+++ b/internal/webui/webui.go
@@ -36,6 +36,7 @@ import (
"time"
"github.com/xiaoqidun/ofdgo"
+ baseimage "github.com/xiaoqidun/ofdgo/internal/base/image"
)
// sessionTextCacheBytes 限制会话文字索引的内存预算
@@ -1622,7 +1623,7 @@ func (e *businessEngine) checkDocument(name string) error {
return nil
}
switch name {
- case "ofdgoFontFaces", "ofdgoFontMenu", "ofdgoFontPreferenceOrder", "ofdgoFontFace", "ofdgoCheckTextFont":
+ case "ofdgoFontFaces", "ofdgoFontMenu", "ofdgoFontPreferenceOrder", "ofdgoFontFace", "ofdgoCheckTextFont", "ofdgoImagePageSize":
return nil
case "ofdgoDiscardObjects", "ofdgoExportObjects", "ofdgoCheckDocument", "ofdgoPDFContext", "ofdgoOpenPDF", "ofdgoOpen", "ofdgoLoadPDF", "ofdgoConfigure", "ofdgoDocumentInfo", "ofdgoSVGFontData", "ofdgoRenderBackends", "ofdgoOutputFormats", "ofdgoExportFormats", "ofdgoParsePageRange", "ofdgoMatchFontFiles", "ofdgoOutlineLinks", "ofdgoDocumentNavigation", "ofdgoInvoices", "ofdgoRenderPage", "ofdgoSearchPage", "ofdgoPageTextString", "ofdgoOpenLinks", "ofdgoDiscardPrint", "ofdgoDiscardSave", "ofdgoDetectFormat", "ofdgoConvertFile", "ofdgoPackFiles", "ofdgoLoadImport", "ofdgoCreateDocument", "ofdgoLayoutPrint", "ofdgoPrintSide", "ofdgoPrintPDF":
return nil
@@ -6260,6 +6261,30 @@ func (e *businessEngine) importImages(args []platformValue) (any, error) {
return editorPageInfo{info, position}, err
}
+// imagePageSize 读取图片建页使用的物理尺寸和方向，不改变文档状态
+// 入参: args 图片数据
+// 返回: any 图片宽高，单位为毫米, error 错误信息
+func (e *businessEngine) imagePageSize(args []platformValue) (any, error) {
+ data, err := e.bytesFromJS(args[0])
+ if err != nil {
+ return nil, err
+ }
+ ctx := e.operationContext()
+ config, format, err := baseimage.DecodeConfigDataContext(ctx, data)
+ if err != nil {
+ return nil, err
+ }
+ metadata, err := baseimage.PageMetadataContext(ctx, data, format, 96)
+ if err != nil {
+ return nil, err
+ }
+ width, height := float64(config.Width)*25.4/metadata.XDPI, float64(config.Height)*25.4/metadata.YDPI
+ if metadata.Orientation >= 5 {
+ width, height = height, width
+ }
+ return successResult(map[string]any{"width": width, "height": height}), nil
+}
+
// createDocument 新建单页文档
// 入参: args 标题、纸张宽高和注解设置
// 返回: any 文档信息, error 错误信息
@@ -8111,6 +8136,7 @@ func (e *businessEngine) businessCommands() map[string]func([]platformValue) (an
"ofdgoFontFace": e.fontFace,
"ofdgoCreateDocument": e.createDocument,
"ofdgoImportImages": e.importImages,
+ "ofdgoImagePageSize": e.imagePageSize,
"ofdgoEditDocument": e.editDocument,
"ofdgoUpdateInfo": e.updateInfo,
"ofdgoChangeAttachment": e.changeAttachment,