|
@@ -5,7 +5,14 @@
|
|
|
<!-- 右侧: 预览 & Canvas 结果 -->
|
|
<!-- 右侧: 预览 & Canvas 结果 -->
|
|
|
<div
|
|
<div
|
|
|
id="captureTarget"
|
|
id="captureTarget"
|
|
|
- style="position: fixed; left: -100000px; top: 0; width: 1240px; min-height: 1754px; background: #ffffff;"
|
|
|
|
|
|
|
+ style="
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ left: -100000px;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ width: 1240px;
|
|
|
|
|
+ min-height: 1754px;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ "
|
|
|
>
|
|
>
|
|
|
<div v-html="editableHtml"> </div>
|
|
<div v-html="editableHtml"> </div>
|
|
|
</div>
|
|
</div>
|
|
@@ -345,14 +352,21 @@
|
|
|
img.onload = () => {
|
|
img.onload = () => {
|
|
|
console.log('图片加载成功,原始尺寸:', img.width, img.height);
|
|
console.log('图片加载成功,原始尺寸:', img.width, img.height);
|
|
|
|
|
|
|
|
- // 根据签章类型设置尺寸:公用章 120x120,个人章 120x40
|
|
|
|
|
|
|
+ // 根据签章类型设置最大盒子尺寸,保持原图宽高比等比缩放,避免变形
|
|
|
|
|
+ const MAX_W = data.sealType === 'private' ? 280 : 240;
|
|
|
|
|
+ const MAX_H = data.sealType === 'private' ? 170 : 240;
|
|
|
|
|
+
|
|
|
|
|
+ // 原图宽高比(避免 0 除以 0,给个兜底)
|
|
|
|
|
+ const ratio = img.width / img.height || 1;
|
|
|
let width, height;
|
|
let width, height;
|
|
|
- if (data.sealType === 'private') {
|
|
|
|
|
- width = 210;
|
|
|
|
|
- height = 70;
|
|
|
|
|
|
|
+ if (MAX_W / MAX_H > ratio) {
|
|
|
|
|
+ // 盒子比原图更"宽",以高为基准
|
|
|
|
|
+ height = MAX_H;
|
|
|
|
|
+ width = height * ratio;
|
|
|
} else {
|
|
} else {
|
|
|
- width = 200;
|
|
|
|
|
- height = 200;
|
|
|
|
|
|
|
+ // 盒子比原图更"窄"(或等比),以宽为基准
|
|
|
|
|
+ width = MAX_W;
|
|
|
|
|
+ height = width / ratio;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const posX = x - width / 2;
|
|
const posX = x - width / 2;
|
|
@@ -372,7 +386,7 @@
|
|
|
imgId: data.imgId,
|
|
imgId: data.imgId,
|
|
|
imgUrl: data.url,
|
|
imgUrl: data.url,
|
|
|
version: data.version,
|
|
version: data.version,
|
|
|
- name:data.name,
|
|
|
|
|
|
|
+ name: data.name,
|
|
|
x: posX,
|
|
x: posX,
|
|
|
y: posY,
|
|
y: posY,
|
|
|
width,
|
|
width,
|