Skip to content

[js] 第116天 如何使用js来截图?怎样截可见区域和整个页面? #1047

Open
@haizhilin2013

Description

@haizhilin2013

第116天 如何使用js来截图?怎样截可见区域和整个页面?

Activity

LinStan

LinStan commented on Aug 10, 2019

@LinStan

可以基于html2canvas 和 canvas2image 两个第三方类实现截图。

如果打算截取整个页面 可以直接设定

html2canvas(document.body).then(function (canvas) {
        document.body.appendChild(canvas);
      });

如果打算截取可见区域 额外设置一下宽高即可

width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
y: document.documentElement.scrollTop
ghost

ghost commented on Aug 10, 2019

@ghost

这种东西太hack了...browser 上搞纯属自虐

nodejs 可以考虑一系列 headless 库,例如 puppeteer 和 phantomjs

Lucenova

Lucenova commented on Nov 12, 2019

@Lucenova

@t532 楼上说的对,但是更推荐用puppeteer,phantomjs已经停止维护了,在一些比较新的ES的语法上会出现一些问题

CaptainJon

CaptainJon commented on Apr 29, 2021

@CaptainJon

不知道,目前市面上的库html2canvas 和 canvas2image 都不能处理渐变色文字,不能算完美的库

xiaoqiangz

xiaoqiangz commented on Jul 6, 2022

@xiaoqiangz

市面上html2canvas库用来截图比较多,截整个页面可传入body 如 :
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@xiaoqiangz@Lucenova@LinStan@CaptainJon

        Issue actions

          [js] 第116天 如何使用js来截图?怎样截可见区域和整个页面? · Issue #1047 · haizlin/fe-interview