总结回顾
合成海报
业务要求
将课程封面图、标题、价格、链接二维码、及用户信息合成海报最终效果如右图所示
过程分析
如果在后端合成图片，需要将图片存放在服务器上，并且频繁生成图片，占用，最后决定由客户端实现。
- 设备分辨率考虑
最终图片大小设定未宽750px，高度根据内容变化，在移动端展示效果较为清晰，
在html转画布时，不用考虑比例缩放问题，就按1：1生成图片 - 需要将课程图片加上高斯模糊效果，作为整个海报的背景
局部引入stackblur-canvas，设置高斯模糊
StackBlur.image('coverImg', targetCanvas, 30, false);
this.blur_img_src = targetCanvas.toDataURL('image/jpeg',1);
最终得到base64格式的图片地址。
其中由于页面长度会影响到图片的绘制起止位置，将html设置为position:fixed即可解决。不用去复杂地计算
- 图片位置居中，根据适应图标内容高度
在模糊图片加载完后，设置位置居中
setImgPositionCenter(blurImg){
let card = this.$refs.card;
card.style["display"] = "block";
let width = blurImg.clientWidth;
let height = blurImg.clientHeight;
blurImg.style['margin-left'] = '-'+Math.round(width/2)+'px';
blurImg.style['height'] = Math.floor(height)+'px';
},
-
html2canvas绘制图片无法显示
1）绘制时间过早，图片尚未加载完成，需要等待所有图片准备就绪。
如图所示，计算图片数量，一共需要6张图片。
当图片加载完成时，触发onload事件，累计数量，监听数量变化。
当数量到达6时，再将html合成最终图片。
2）跨域请求图片，被浏览器拦截。
图片生成前，添加 image.crossOrigin = "*";后端设置允许跨域访问html2canvas(this.$refs.card,{ width:width, height:height, logging: false, scale:1, allowTaint:false, useCORS:true, }).then((canvas)=>{ let poster_src = canvas.toDataURL('image/jpeg',1); this.$refs.card.remove(); this.$emit('endCreatePoster',this.order,poster_src); }) -
偶发文字重叠
通过css解决。设置文字间隔letter-spacing: 1px;设置文字对齐text-align: justify
英文链接支持换行；显示正文全部内容；
字符串过长使用css隐藏，有特殊字符显示。text-overflow: ellipsis; overflow: hidden;white-space: nowrap; -
进度条，高斯模糊的实现
由于进度条是svg实现的直接转html会出现比例问题，所以使用canvg处理svg转canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 214;
canvas.height = 214;
//使用canvg处理svg转canvas
let str = $(".html-card").find("svg").get(0).outerHTML;
let v = Canvg.fromString(ctx, str);
v.start();
//找出html中的svg替换成canvas
let svgElem = $(".html-card").find("svg").get(0);
$(canvas).replaceAll(svgElem);
- app中内嵌h5，在ios中获取不到图片
需要将base64地址去掉前缀"data:image/jpeg;base64,"
课堂分组成员：按首字母索引
业务要求
过程分析
图片裁剪压缩上传
业务要求
过程分析
直播系统
业务要求
过程分析
适应浏览器自动播放策略，ios微信中自动播放；
回放不要全屏播放；
视频清晰度优化设置；
消息支持链接点击，防注入；
未接入摄像头/麦克风的嘉宾访问处理；
嘉宾断线变成普通用户；在线嘉宾管理员不能设置入席；主副样式 设置；嘉宾入座无画面，偶发播放布局错位情况；
配置更新时，通知其他客户端更新；
移动端兼容直播流解码配置；
管理员但不是嘉宾 要加入rtc，可进行推流，但不能视频和通话；
直播回放；
推流设置；推流方案实现；推流到cdn，合图大小等设置，抢推优化
本地默认镜像， 远端没有跟着镜像，声网不支持推流设置镜像，需要使用自定义视频采集和渲染功能，比较棘手，而且只支持 Chrome 浏览器
多主播入席离席，抢推流
消息发送与接收、撤销讨论、讨论时间显示处理；
本地流麦克风、摄像头开启与关闭；
观众拉流播放；
控制台嘉宾座位显示；
| 视频协议 | 用途 | URL 地址格式 | PC 浏览器 | 移动浏览器 |
|---|---|---|---|---|
| HLS（M3U8） | 可用于直播 | http://xxx.xxx.com/xxx.m3u8 | 支持 | 支持 |
| HLS（M3U8） | 可用于点播 | http://xxx.xxx.com/xxx.m3u8 | 支持 | 支持 |
| FLV | 可用于直播 | http://xxx.xxx.com/xxx.flv | 支持 | 不支持 |
| FLV | 可用于点播 | http://xxx.xxx.com/xxx.flv | 支持 | 不支持 |
| RTMP | 只适用直播 | rtmp://xxx.xxx.com/live/xxx | 支持 | 不支持 |
| MP4 | 只适用点播 | http://xxx.xxx.com/xxx.mp4 | 支持 | 支持 |
总结
重点在研究技能，方向很重要。
pdf展示技术迭代
文档上传flash改ajax实现，兼容ie9；
没有更新到最新版本的pdf2.5
用户体验上，需要检测设备接入状态，主播需要关注及管理的内容较多。
技术选型上，微信端不支持推流，只支持拉流播放。
直播流延迟十几秒问题处理，几种拉流的协议区别。参考市场上的直播效果，发现都是有延迟，
团队合作
- 跨域问题的设置
appache 设置字体跨源
<FilesMatch ".(ttf|otf|eot|woff|svg|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
直播的配置web摄像头只有https或localhost才有权限获取，协助服务端配置环境
测评报告的展示，请求的pdf跨源
- 文档
改用ajax接口请求的方式实现。
优点：
1、客户端可共用接口；
2、可实现跨频道请求；
缺点：
1、需要进行DOM转字符串拼接，且页面元素结构不清晰；
2、许多封装好的tpl不能直接使用，需要阅读代码再转换js形式；
3、为兼容历史结构，页面跳转需要进行参数转换；
文档包含较多业务逻辑、重构需要花费较多精力。
为快速实现需求，直接在已有的框架上修改，原有代码不熟悉，实现需求比较慢
不足与改进
- 不要同时执行多项任务：避免陷入注意力的陷阱。
当你在做一个项目的时候，大脑专注于它，你很清楚做某件事的所有原因，这时候你的脑子里存在一个与之相关的复杂结构。想在几个星期后重新建立这种结构十分困难，你必须先想起来你在做决定是考虑的所有因素，必须重新建立促使你做出该决定的思考流程，再度成为当时的自己，把自己拉回到已经不复存在的思维里。
一次性把事情做好也是节约时间的好方法。在做事的过程中，及时找出问题并纠正问题，比事情完成后再发现问题进行返工，要高效的多。
展望2021
自我管理
- 学习有利于提高工作效率的技能。以便快速满足业务需求，实现业务价值。
- 在每一次项目之前，认真分析工作内容，对于可能出现的一些情况做好记录。
- 将学到的技术及经验记录，输出文档，总结收获。
- 深入 vue 技术栈的原理与内在实现。学习源码中所用到的经典设计思想，从而提升技术审美，编程能力。
- 设置一个待办事项，在办事项和完成事项的表格，放在书桌或贴于墙面，时刻了解进度。为自己目前的工作或学习设置一个冲刺时间，一周或一个月，按照这个周期自查，时刻保持紧迫感。最后每个冲刺阶段结束后都要及时展示成果，激励自己
技能目标
| 时间段 | 技能 | 目标 |
|---|---|---|
| 第1季度 | 百科界面改版 | 根据新的版式设计，完成页面展示与交互逻辑处理。 |
| 第3季度 | 文档pdfjs源码的学习 | 文档pdfjs源码的学习，熟悉代码风格，提升编程思维，了解pdf加载原理，服务性能优化 |
| 第2季度 | Nuxt.js | 需要部署一套node服务端，域名等可能需要更换。对单页面应用进行SEO优化 |
| 第4季度 | 课堂pc端改版 | 根据需求及pc的排版设计，分析pc端与移动端的技术实现方案，并实现 |
网友评论