highlight: a11y-dark
theme: smartblue

本文正在参加「金石计划 . 瓜分6万现金大奖」。

前端截图

html2canvas 基本用法

import html2canvas from 'html2canvas'
const screenshot = () => {
  // 获取需要截图的 dom 节点
  const el = document.getElementById('target-id')
  // 第一个参数是节点,第二个参数是一些配置
  // 默认是不对跨域资源做处理, 需要添加额外的配置 useCORS，并且需要资源本身支持跨域
  // scale 默认使用 window.devicePixelRatio 导致图片尺寸可能和设置的不同, 这里手动改为1
  html2canvas(el, { width: 375, useCORS: true, scale: 1 }).then(canvas => {
    // 获取要显示的节点
    const image = document.getElementById('show-id')
    // 调用 canvas 的 toDataUrl 方法转成 base64 的图片赋值给 src
    image.src = canvas.toDataUrl()
  })
}

踩坑1

在截图的时候，虽然设置了 width，但是会出现实际尺寸和设置的值不一样的情况。

设备像素/物理像素

设备像素也被称为物理像素，是显示设备中一个最微小的物理部件，在同一设备中，物理像素的总数是固定的。

独立像素/CSS像素

CSS 像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量 Web 页面上的内容，CSS 像素被称为与设备无关的像素（device-independent像素），简称为 DIPs

window.devicePixelRatio

返回当前显示设备的物理像素分辨率与CSS像素分辨率之比，简单来说，它告诉浏览器应该使用多少屏幕实际像素来绘制单个 CSS 像素。

所以在标准屏幕下，devicePixelRatio 应该为 1 。

特例

视网膜（Retina）显示屏，它会使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像，devicePixelRatio 为 2。

所以虽然我们设置的元素 css 尺寸是 375px，但是因为 Apple 是视网膜屏幕，所以使用了两倍于 css 尺寸的设备像素来渲染它，这就是最后图片尺寸为 750px 的原因。

踩坑2

html2canvas 在截图的时候， 无法渲染 box-shadow 属性，哪怕是初始值，会渲染出一块黑色的东西。

需要把 box-shadow 属性的值给设置为 none。

另外，无法截取隐藏部分的内容。

生成二维码

qrcode

TS 需要单独安装类型文件

npm install --save qrcode
npm install --save-dev @types/qrcode

基础用法

// 需要一个 canvas 节点
<canvas id='canvas-qrcode'></canvas>

import QRCode from 'qrcode'

const qrCode = () => {
  // 获取需要生成二维码的 dom 节点
  const ele = document.getElementById('canvas-qrcode')
  // 生成二维码
  QRCode.toCanvas(ele, 'www.baidu.com', { width: 100 }).then(() => {
    console.log('success')
  })
}

复制到剪切板

TS 不需要单独安装类型文件

npm install --save clipboard

基础用法

// 需要一个目标元素, 拥有唯一的 id
<div id='target-id'>我是被复制的内容</div>
// 需要一个进行复制操作的元素 ,需要添加自定义属性 data-clipboard-target, 需与目标 id 相同
// data-clipboard-action 属性是要进行的操作, 默认是 copy 复制, 也支持 cut 剪切
<div data-clipboard-target="#target-id" class="copy-btn" data-clipboard-action="cut">点我进行复制</div>

import Clipboard from 'clipboard'

// 参数是复制元素的选择器
const clipboard = new Clipboard(".copy-btn")

// 基于事件的回调
clipboard.on('success', (e) => {
  console.log('复制成功');
  e.clearSelection()
})
clipboard.on('error', (e) => {
  console.log('复制失败');
})

下载文件

FileSaver.js

TS 需要单独安装类型文件

npm install --save file-saver
npm install --save-dev @types/file-saver

基础用法

import { saveAs } from 'file-saver'

// 第一个参数是文件, 字符串或blob类型, 第二个参数是文件名
saveAs(file, filename)