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官网上有一个这样的配置项:

名字默认值描述
scalewindow.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 预编译与作用域

相关推荐

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

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

    13 天前
  • 🔥前端面试大厂手写源码系列(上)

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

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

    昨天的文章手写了一版redux的核心源码(https://segmentfault.com/a/1190000016799698),redux库除了数据的状态管理还有一块重要的内容那就是中间件,今天我...

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

    最近自己撸了一个轮播图,在点击切换的时候,为了寻求更好的用户体验,引入了节流,在此记录对源码的学习过程 源码来源:underscore(https://github.com/jashkenas/und...

    2 年前
  • 阅读redux源码_compose

    先上源码: 重点看一句就够了: 现在我们先假设一个数组,有3个函数,分别是x,y,z 那么发生什么了,接下来就一步一步解释 1. 变成reduce模式: 2. reduce第一次执行,...

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

    (https://img.javascriptcn.com/152091d995a0b72de8b8d6aa8c0c768f) 从正则表达式 (https://img.javascriptc...

    1 年前
  • 逐行解析Axios源码

    image(https://img.javascriptcn.com/ebf0e6753d1e997cdc179de364317eed "image") 源码目录结构 前言 本文主要关注...

    8 个月前
  • 逐行粒度的vuex源码分析

    了解vuex 什么是vuex 图片描述(https://img.javascriptcn.com/6de1abc14258c286464237639a9b815f "图片描述") vuex是一...

    1 年前
  • 跟着源码学习VUE之上手

    流程 这边的代码流程不细讲。网上有人讲的很细了。想细致了解的推荐阅读 VUE2.1.7源码学习(http://hcysun.me/2017/03/03/Vue%E6%BA%90%E7%A0%81%...

    2 年前
  • 超轻量级web框架koa源码阅读

    koa是一个非常轻量的web框架,里面除了ctx和middleware之外什么都没有,甚至连最基本的router功能都需要通过安装其他中间件来实现。不过虽然简单,但是它却非常强大,仅仅依靠中间件机制就...

    2 年前

官方社区

扫码加入 JavaScript 社区