携程前端实习一面面经
携程前端一面
-
介绍项目
-
Vuex五个概念
-
Vuex中的数据存在哪儿，刷新页面后会怎样
-
页面内存中，刷新后丢失
-
-
Vuex原理
-
Vuex与Redux区别
-
队列动画如何实现
-
列表渲染时根据下标设置不同的动画延迟时间
-
-
CSS开启硬件加速的方式
-
localStorage与vuex区别
-
存储位置，数据是否响应式
-
-
实现24小时内只弹出一次弹窗
-
本地存储结合计时
-
-
元素层级关系
-
正则实现数字千分位表示
-
let num = "12345678"; let reg = /(?!^)(?=(\d{3})+$)/g; console.log(num.replace(reg, ","));
-
-
如何处理图片像素
-
先根据Image构造函数实例化一个image实例
-
通过canvas实例的drawimage方法绘制该图片
-
再由canvas实例的getImageData获取图像数据
-
处理完像素后，通过canvas实例的putImage重新绘图
-
例如，将图像置灰
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Document</title> </head> <body> </body> <script> const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') const image = new Image() image.src = './22222.jpg' image.onload = function () { canvas.width = this.width canvas.height = this.height // 绘制图片到canvas容器 ctx.drawImage(image, 0, 0, this.width, this.height) // 获取图片信息 let imageData = ctx.getImageData(0, 0, this.width, this.height) let data = imageData.data // 操作图片像素 for (let i = 0; i < data.length; i += 4) { let average = (data[i] + data[i + 1] + data[i + 2]) / 3 data[i] = average data[i + 1] = average data[i + 2] = average } // 重新绘图 ctx.putImageData(imageData, 0, 0) document.body.appendChild(canvas) } </script> </html>
-
-
如何用JS压缩图片
-
借助canvas
-
例如
-
import { message } from "antd"; const fileReader = new FileReader(); const compress = (file: File): Promise<File> => { return new Promise((resolve, reject) => { if (!file) { message.error("请先选择图片!"); reject(); } if (file.size > 10 * 1024 * 1024) { message.error("请上传10M以下的图片!"); reject(); } // 压缩一兆以上图片 if (file.size > 1024 * 1024) { let rate = 0.2; fileReader.readAsDataURL(file); let img = new Image(); fileReader.onload = function() { img.src = fileReader.result as string; }; img.onload = function() { let canvas = document.createElement("canvas"); let context = canvas.getContext("2d"); // 文件大小KB const fileSizeKB = Math.floor(file.size / 1024); // 配置rate和maxSize的关系 if (fileSizeKB * rate > 3027) { rate = Math.floor((3027 / fileSizeKB) * 10) / 30; } // 缩放比例，默认0.5 let targetW = (canvas.width = img.width * rate); let targetH = (canvas.height = img.height * rate); context?.clearRect(0, 0, targetW, targetH); context?.drawImage(img, 0, 0, targetW, targetH); canvas.toBlob((blob) => { const newImage = new File([blob as Blob], file.name, { type: file.type }); resolve(newImage); }); }; } else { resolve(file); } }); }; export { compress };
-
-
移动端适配
-
svg是什么
-
svg绘制椭圆
-
<svg> <ellipse cx="200" cy="90" fill="#ccc" rx="100" ry="50" stroke="#333" stroke-width="2px"/> </svg>
-
-
图片的几种格式以及区别
-
flex: 1 0 100px代表什么
-
反问
查看13道真题和解析