本文正在参加「金石计划 . 瓜分6万现金大奖」。
前端截图
html2canvas 基本用法
代码语言：javascript复制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基础用法
代码语言：javascript复制// 需要一个 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基础用法
代码语言：javascript复制// 需要一个目标元素, 拥有唯一的 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基础用法
代码语言：javascript复制import { saveAs } from 'file-saver'
// 第一个参数是文件, 字符串或blob类型, 第二个参数是文件名
saveAs(file, filename)
