html2canvas使用文档,附赠解决图片不清晰问题办法(非改源码)

ps:想看调高清晰度的直接滑到最下端

资料

html2canvas简介:

该脚本使您可以直接在用户浏览器上拍摄网页或其一部分的“屏幕快照”。屏幕截图基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,而是根据页面上的可用信息构建屏幕截图;

html2canvas工作原理:

脚本遍历加载页面的DOM。它收集那里所有元素的信息,然后将其用于构建页面的表示形式。换句话说,它实际上并没有获取页面的屏幕截图,而是根据它从DOM读取的属性来构建页面的表示形式。结果,它只能正确呈现它理解的属性,这意味着有许多CSS属性无效。有关受支持的CSS属性的完整列表,请查看受支持的功能页面。

html2canvas支持情况:

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Edge
  • Safari 6+

快速开始

方式一:es6 模块化引入方式

1.npm或cnpm下载html2canvas包

npm install html2canvas

2.import方式引入

import html2canvas from 'html2canvas';

3.使用

html2canvas(document.body,{}).then(function(canvas) {
    var imgUrl = canvas.toDataURL();
    //imgUrl即为图片的base64形式
});

方式二:js直引方式

1.引入js或压缩版js

    <script src="http://html2canvas.hertzen.com/dist/html2canvas.js"/>

    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"/>

2.使用

html2canvas(document.body,{}).then(function(canvas) {
    var imgUrl = canvas.toDataURL();
    //imgUrl即为图片的base64形式
});

解决图片清晰度问题

在html2canvas官网上有一个这样的配置项:

名字 默认值 描述
scale window.devicePixelRatio 用于渲染的比例尺。默认为浏览器设备像素比率。

每个设备的window.devicePixelRatio的值不尽一样,想清晰就调高,想压缩大小就调低。但调的越高,图片的生成时间就越长。
本人多次调试选了一个比较折中的值:scale:1.3

demo:
html2canvas(document.body,{ scale:1.3 }).then(function(canvas) {
    var imgUrl = canvas.toDataURL();
    //imgUrl即为图片的base64形式
});
原文链接:segmentfault.com

上一篇:vue时间格式与时间戳转换
下一篇:JavaScript 预编译与作用域

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    15 小时前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    6 天前
  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    6 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    6 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前
  • 面试还问redux?那我从头手撸源码吧(中间件篇)

    昨天的文章手写了一版redux的核心源码,redux库除了数据的状态管理还有一块重要的内容那就是中间件,今天我还是尝试将此部分源码完成。 中间件 react中管理数据的流程是单向的,就是说,从派发动作...

    2 年前
  • 防抖与节流(源码学习)

    最近自己撸了一个轮播图,在点击切换的时候,为了寻求更好的用户体验,引入了节流,在此记录对源码的学习过程 源码来源:underscore 防抖 函数防抖(debounce) 使用场景:现在我们需要做一个...

    2 年前
  • 阅读redux源码_compose

    先上源码: // 将(fun1,fun2,fun3)转换成fun1(fun2(fun3())) export default function compose(...funcs) { if (fu...

    2 年前
  • 阅读 is-generator-function 源码

    Function.prototype.toString 从正则表达式 /^\s*(?:function)?\*/ 可知 1: GeneratorFunction 不管书写是 function* 还是...

    2 年前
  • 速览vuex源码

    Vuex 源码不过千行,主要使用了 Store 类、ModuleCollection 类、Module 类,结构清晰,下面简单说说 Vuex 中一些主要的源码实现。推荐打开 Vuex 源码一同观看。

    5 个月前

官方社区

扫码加入 JavaScript 社区