Skip to content

Commit

Permalink
feat: pdf图片不清晰为分辨率过小导致, 先统一x2, 看下效果
Browse files Browse the repository at this point in the history
  • Loading branch information
yangmingming committed Oct 26, 2024
1 parent 7e8046a commit 1fce7f0
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 11 deletions.
24 changes: 18 additions & 6 deletions src/command/generate/customer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ import CommonUtil from '~/src/library/util/common'
* 单张页面渲染时间不能超过60秒
*/
const Const_Render_Html_Timeout_Second = 60
/**
* 宽为760px的图片, 在电脑端打开正常, 但是pdf中会被拉伸到全屏大小, 成为原先的200%, 导致模糊.
* 为了保证pdf中图片清晰, 因此需要在截图时, 主动x2. 代价是pdf文件更大, 但可接受
*/
const Pixel_Zoom_Rate = 2
/**
* 渲染webview最大高度(经实验, 当Electron窗口高度超过16380时, 会直接黑屏卡死, 所以需要专门限制下)
*/
Expand All @@ -54,7 +59,8 @@ let Is_Normal_Display_Rate = true

// 硬编码传入
let globalSubWindow: InstanceType<typeof BrowserWindow> = null
const Const_Default_Webview_Width = 760;
// 图片放大后, 页面宽度也要等比例放大
const Const_Default_Webview_Width = 760 * Pixel_Zoom_Rate;
const Const_Default_Webview_Height = 10;
class GenerateCustomer extends Base {
static get signature() {
Expand Down Expand Up @@ -595,18 +601,24 @@ class GenerateCustomer extends Base {
}, Const_Render_Html_Timeout_Second * 1000)

let render = async () => {
// 先载入html文件
// this.log("load url -> ", pageConfig.htmlUri)
await webview.loadURL(htmlUri);
// this.log("setContentSize -> ", Const_Default_Webview_Width, Const_Default_Webview_Height)
// 然后设置分辨率, Const_Default_Webview_Width x Const_Default_Webview_Height, 这里是正常的
await globalSubWindow.setContentSize(
Const_Default_Webview_Width,
Const_Default_Webview_Height,
);
// 若希望文件清晰, 分辨率需进行放大
globalSubWindow.webContents.setZoomFactor(Pixel_Zoom_Rate)

// 放大后页面scrollHeight为css值, 需要乘以放大系数后, 才是实际像素值
// @alert 注意, 在这里有可能卡死, 表现为卡住停止执行. 所以需要在外部加一个超时限制
// this.log("resize page, executeJavaScript ")
let scrollHeight = await webview.executeJavaScript(
`document.children[0].children[1].scrollHeight`,
);
) * Pixel_Zoom_Rate;

let imageUriList: string[] = []
if (scrollHeight > Const_Max_Webview_Render_Height_Px) {
Expand Down Expand Up @@ -727,7 +739,7 @@ class GenerateCustomer extends Base {
})
let out = mozjpeg.encode(jpgContent, {
//处理质量 百分比
quality: 80
quality: 50
});
jpgContent = out.data
fs.writeFileSync(
Expand Down Expand Up @@ -762,7 +774,7 @@ class GenerateCustomer extends Base {
})
let out = mozjpeg.encode(jpgContent, {
//处理质量 百分比
quality: 80
quality: 50
});
jpgContent = out.data
fs.writeFileSync(
Expand All @@ -789,7 +801,7 @@ class GenerateCustomer extends Base {

let out = mozjpeg.encode(jpgContent, {
//处理质量 百分比
quality: 80
quality: 50
});
jpgContent = out.data
let imageUri = baseImageUri + '0.jpg'
Expand Down Expand Up @@ -926,7 +938,7 @@ class GenerateCustomer extends Base {
x: 0,
y: 0,
width: width,
height: height
height: height,
})
if (i === 0) {
// 只在第一页添加文字
Expand Down
15 changes: 10 additions & 5 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,16 +114,19 @@ function createWindow() {
// 配置最大高度, 该值默认值为屏幕高度, 如果大于该高度, 会出现滚动条
maxHeight: 10000,
// 负责渲染的子窗口不需要显示出来, 避免被用户误关闭
show: false,
show: true,
})

async function debugCaputure() {
let targetSource =
'file:///F:/www/share/github/stablog/%E7%A8%B3%E9%83%A8%E8%90%BD%E8%BE%93%E5%87%BA%E7%9A%84%E7%94%B5%E5%AD%90%E4%B9%A6/%E5%85%94%E4%B8%BB%E5%B8%AD-%E5%BE%AE%E5%8D%9A%E6%95%B4%E7%90%86(2021-03-08~2021-03-27)/html_to_pdf/2021%EF%BC%8D03%EF%BC%8D27%2013%EF%BC%9A27%EF%BC%9A40_4619352240819112.html'
'file:///D:/win_www/stablog/%E7%A8%B3%E9%83%A8%E8%90%BD%E8%BE%93%E5%87%BA%E7%9A%84%E7%94%B5%E5%AD%90%E4%B9%A6/%E4%BA%8C%E7%BA%A7%E5%B8%82%E5%9C%BA%E6%8D%A1%E8%BE%A3%E9%B8%A1%E5%86%A0%E5%86%9B-%E5%BE%AE%E5%8D%9A%E6%95%B4%E7%90%86-(2020-11-06~2023-01-19)/html_to_pdf/2023-01-13%2013%EF%BC%9A54%EF%BC%9A49_4857447900517349.html'
let demoUri = path.resolve(__dirname, '../demo.jpg')

const Const_Max_Webview_Render_Height_Px = 5000
const Const_Default_Webview_Width = 760
// 图片放大系数, 系数越大, pdf越清晰, 文件体积越大
const Pixel_Zoom_Radio = 2

const Const_Max_Webview_Render_Height_Px = 5000 * Pixel_Zoom_Radio
const Const_Default_Webview_Width = 760 * Pixel_Zoom_Radio
const Const_Default_Webview_Height = 10

let webview = subWindow.webContents
Expand All @@ -132,9 +135,11 @@ function createWindow() {
await webview.loadURL(targetSource)
// this.log("setContentSize -> ", Const_Default_Webview_Width, Const_Default_Webview_Height)
await globalSubWindow.setContentSize(Const_Default_Webview_Width, Const_Default_Webview_Height)
// 扩大为200%
await globalSubWindow.webContents.setZoomFactor(Pixel_Zoom_Radio)
// @alert 注意, 在这里有可能卡死, 表现为卡住停止执行. 所以需要在外部加一个超时限制
// this.log("resize page, executeJavaScript ")
let scrollHeight = await webview.executeJavaScript(`document.children[0].children[1].scrollHeight`)
let scrollHeight = await webview.executeJavaScript(`document.children[0].children[1].scrollHeight`) * Pixel_Zoom_Radio

let jpgContent: Buffer
if (scrollHeight > Const_Max_Webview_Render_Height_Px) {
Expand Down

0 comments on commit 1fce7f0

Please sign in to comment.