当前位置:首页 > 文章列表 > Golang > Go问答 > 如何改进 chromedp 包中 FullScreenshot() 生成的模糊屏幕截图?

如何改进 chromedp 包中 FullScreenshot() 生成的模糊屏幕截图?

来源:stackoverflow 2024-02-07 22:15:21 0浏览 收藏

各位小伙伴们,大家好呀!看看今天我又给各位带来了什么文章?本文标题《如何改进 chromedp 包中 FullScreenshot() 生成的模糊屏幕截图?》,很明显是关于Golang的文章哈哈哈,其中内容主要会涉及到等等,如果能帮到你,觉得很不错的话,欢迎各位多多点评和分享!

问题内容

如标题所示,这是结果和我的代码。顺便说一句,我用的是一台非常低端的机器。

func main() {

    chromectx, _ := chromedp.newcontext(context.background())
    emulation.setdevicemetricsoverride(1920, 1080, 1.0, false).do(chromectx)

    var width, height int64
    var b []byte
    err := chromedp.run(chromectx,
        chromedp.emulateviewport(10, 10),
        chromedp.navigate(`the content of the file is in the code block below.html`),
        chromedp.evaluateasdevtools(`document.documentelement.scrollwidth`, &width),
        chromedp.emulateviewport(width, 10),
        chromedp.evaluateasdevtools(`document.documentelement.scrollheight`, &height),
        chromedp.emulateviewport(width, height),
        chromedp.fullscreenshot(&b, 100),
    )
    if err != nil {
        log.fatal(err)
    }
    err = ioutil.writefile("test.png", b, 0777)
    if err != nil {
        log.fatal(err)
    }

}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="main">
# 123
123
$\sin(x)=\sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!}x^{2n+1} \sin(x)=\sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!}x^{2n+1} \sin(x)=\sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!}x^{2n+1} \sin(x)=\sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!}x^{2n+1}$
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-latex2img.min.js"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it.min.js"
    crossorigin="anonymous"></script>
<script>
    var main = document.getElementById("main");
    var md = window.markdownit({ html: true });
    md.use(window.markdownitLatex2img, { style: "filter: opacity(75%);transform:scale(0.75);text-align:center" });
    var result = md.render(main.innerHTML);
    main.innerHTML = result;
</script>
</body>

我想也许有一个 dpi 的设置?还是因为我的机器太弱了?不幸的是,我没有更多的资源来探索真相。所以请各位帮忙,怎样才能让截图更清晰?


正确答案


与您机器的配置无关。增加 devicescalefactor 将使图像看起来更好。请参阅下面的演示:

package main

import (
    "context"
    "log"
    "os"

    "github.com/chromedp/cdproto/emulation"
    "github.com/chromedp/chromedp"
)

func main() {
    ctx, cancel := chromedp.newcontext(context.background(), chromedp.withdebugf(log.printf))
    defer cancel()

    var width, height int64
    var b []byte
    err := chromedp.run(ctx,
        chromedp.emulateviewport(10, 10),
        chromedp.navigate(`the content of the file is in the code block below.html`),
        chromedp.evaluateasdevtools(`document.documentelement.scrollwidth`, &width),
        chromedp.actionfunc(func(ctx context.context) error {
            return chromedp.emulateviewport(width, 10).do(ctx)
        }),
        chromedp.evaluateasdevtools(`document.documentelement.scrollheight`, &height),
        chromedp.actionfunc(func(ctx context.context) error {
            return chromedp.emulateviewport(width, height, func(sdmop *emulation.setdevicemetricsoverrideparams, steep *emulation.settouchemulationenabledparams) {
                sdmop.devicescalefactor = 3
            }).do(ctx)
        }),
        chromedp.fullscreenshot(&b, 100),
    )
    if err != nil {
        log.fatal(err)
    }
    err = os.writefile("test.png", b, 0o777)
    if err != nil {
        log.fatal(err)
    }
}

较大的 devicescalefactor 会产生较大的图像:

$ file *.png
7e9rfcQO.png: PNG image data, 797 x 144, 8-bit/color RGBA, non-interlaced
test.png:     PNG image data, 2391 x 432, 8-bit/color RGBA, non-interlaced

其他注意事项:

  1. 在您的代码中, emulation.setdevicemetricsoverride(1920, 1080, 1.0, false).do(chromectx) 返回 chromedp.errinvalidcontext 错误。它可以被完全删除。
  2. 在您的代码中,对 chromedp.emulateviewport 的所有调用均通过参数 width: 0height: 0 传递。应将其包装在 chromedp.actionfunc 中以获取更新的 widthheight

好了,本文到此结束,带大家了解了《如何改进 chromedp 包中 FullScreenshot() 生成的模糊屏幕截图?》,希望本文对你有所帮助!关注golang学习网公众号,给大家分享更多Golang知识!

版本声明
本文转载于:stackoverflow 如有侵犯,请联系study_golang@163.com删除
Golang 结构的指针字段在地图上Golang 结构的指针字段在地图上
上一篇
Golang 结构的指针字段在地图上
简化 ASN1 Marshal/Unmarshal 过程以跳过字段
下一篇
简化 ASN1 Marshal/Unmarshal 过程以跳过字段
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    542次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    511次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    498次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    484次学习
查看更多
AI推荐
  • 千音漫语:智能声音创作助手,AI配音、音视频翻译一站搞定!
    千音漫语
    千音漫语,北京熠声科技倾力打造的智能声音创作助手,提供AI配音、音视频翻译、语音识别、声音克隆等强大功能,助力有声书制作、视频创作、教育培训等领域,官网:https://qianyin123.com
    131次使用
  • MiniWork:智能高效AI工具平台,一站式工作学习效率解决方案
    MiniWork
    MiniWork是一款智能高效的AI工具平台,专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具,提供精准智能解决方案,让复杂工作简单高效。
    126次使用
  • NoCode (nocode.cn):零代码构建应用、网站、管理系统,降低开发门槛
    NoCode
    NoCode (nocode.cn)是领先的无代码开发平台,通过拖放、AI对话等简单操作,助您快速创建各类应用、网站与管理系统。无需编程知识,轻松实现个人生活、商业经营、企业管理多场景需求,大幅降低开发门槛,高效低成本。
    138次使用
  • 达医智影:阿里巴巴达摩院医疗AI影像早筛平台,CT一扫多筛癌症急慢病
    达医智影
    达医智影,阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”,仅一次CT扫描即可高效识别多种癌症、急症及慢病,为疾病早期发现提供智能、精准的AI影像早筛解决方案。
    135次使用
  • 智慧芽Eureka:更懂技术创新的AI Agent平台,助力研发效率飞跃
    智慧芽Eureka
    智慧芽Eureka,专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景,通过专家级AI Agent精准执行任务,智能化工作流解放70%生产力,让您专注核心创新。
    138次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码