【架构师（第五十二篇）】 几个前端工具的基本使用 |
您所在的位置：网站首页 › js基本用法 › 【架构师（第五十二篇）】 几个前端工具的基本使用 |
|
本文正在参加「金石计划 . 瓜分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 的原因。 踩坑2html2canvas 在截图的时候， 无法渲染 box-shadow 属性，哪怕是初始值，会渲染出一块黑色的东西。 需要把 box-shadow 属性的值给设置为 none。 另外，无法截取隐藏部分的内容。 生成二维码qrcodeTS 需要单独安装类型文件 npm install --save qrcode npm install --save-dev @types/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 我是被复制的内容 // 需要一个进行复制操作的元素 ,需要添加自定义属性 data-clipboard-target, 需与目标 id 相同 // data-clipboard-action 属性是要进行的操作, 默认是 copy 复制, 也支持 cut 剪切 点我进行复制 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.jsTS 需要单独安装类型文件 npm install --save file-saver npm install --save-dev @types/file-saver基础用法import { saveAs } from 'file-saver' // 第一个参数是文件, 字符串或blob类型, 第二个参数是文件名 saveAs(file, filename) |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |