工作总结

花儿实习总结

封装canvas2img与qrcode.js

Posted by page on March 29, 2020

一段实习(2021.3.22 - 2021.3.28)

SVN 入门

工具安装

TortoiseSvn(小乌龟)

SVN 生命周期

  1. 新建版本库(Create) 1.1 版本库唯一，部署在远程服务器 1.2 所有工作副本均来自版本库文件检出
  2. 检出副本(Checkout) 将版本库中的指定项目目录检出至本地作为工作副本
  3. 编辑本地副本
  4. 检查修改，对比版本库
  5. 本地同步为最新版本库状态，确保没有 conflict(Update)
  6. 提交更改，更新版本库(Commit)

其他操作

  • 还原(Rever) 丢弃本地副本的指定修改部分，还原至起始状态
  • 更新至版本 将本地副本切换为指定版本，再调用 commit 即版本库回退

其他概念

  • Tag/Branch
    • 将本地副本或者版本库目录复制为一份新的版本库目录，可用于版本标记或者作为合并源合并

SVN 初次连接

  1. VPN 连接内网 IP 地址，用户名，密码
  2. SVN 登录 用户名，密码
  3. 连接成功，浏览版本库

一键同步 vscode 插件

  1. github 平台新建 Personal access tokens 串
  2. githubGist 创建 gist 串
  3. vscode 安装 Setting Sync，ctrl+shift+p,搜索 sync 高级选项
  4. 在高级选项中填入串，Shift + Alt + U 读取本地配置至 gist
  5. 新电脑安装同一插件，在高级选项中填入串，Shift + Alt + U 同步配置至本地

前端 2d，3d 动画

动画

  • css 实现
    • css3 自定义动画
  • js 实现
    • animation.js 即$.animate()
    • anime.js 强大
    • velocity 轻量方便
  • HTML5 新技术
    • canvas 画布
    • webGL 3D 协议支持，硬件加速
    • svg svg 元素动画

相关库

  • pixi.js
    • 2D 渲染引擎，支持 Canvas,WebGL 绘制，渲染快且强大
    • github star: 32.2k
  • phaser.js
    • 2D 游戏框架，国外流行，难度适中
    • 基于 pixi.js 引擎，可拓展
    • github star: 29.2k
  • Hilo.js
    • 阿里开源 2D 游戏引擎，为电商活动界面而生，支持 Canvas,WebGL,Dom 多个渲染模式
    • 互动游戏，轻量，3D 需参考 Hilo3d
    • github star: 5.6k
  • lottile-web
    • 能基于设计师的 AE 参数输入，输出动画
    • github star: 23.7k
  • spriteJs
    • 国人开发，文档友好
    • github star: 4.4k
  • ThreeJs
    • 支持 2D,3D;基于 webGL;将 3D 技术融合至 js
    • 灵活，完善，js 方式进行 3D 技术开发

相关框架

  • Egret 游戏引擎
  • Layabox 游戏引擎
  • D3.js/Apache Echartjs 数据可视化

相关概念

  • webGL 一种 3D 绘图协议，为 Canvas 提供硬件加速构建渲染，使其无需插件支持，展示 3D 场景与模型展示
  • 动画标准
    • 流畅：fps
    • 场景：兼容性
    • 效果：3D 材质，色彩，粒子
  • 常见优化
    • Canvas CaChe，读取缓存减少绘制
    • 复用拼图，小图组合
    • 根据硬件信息(内存，屏幕，帧率)，优雅降级
  • 动画分类
    • 简单动画
    • 复杂动画 stage 舞台环境，sprites 动画元素
    • 游戏

canvas 绘制封装

canvas 绘制海报流程

  • 后台响应绘制所需的数据，将其中的分享链接转二维码图片(base64)
  • 在页面上隐藏的 canvas 元素上进行绘制
  • 绘制完成后输出为自适应显示的海报图

Uasge 实例

let $poster = document.querySelector("#shareCanvas");
// 初始化
let posterCavs = new Cavs({
  el: $poster,
  width: 570,
  height: 865,
});
// 传入json绘制参数，调用绘制方法
posterCavs.draw(json);
// 输出为图片
posterCavs.toImage(function (img) {
  document.body.append(img);
});

封装 Cavs 类

  • 特点
    • 以 json 对象表示绘制结构，作为绘制参数
    • 实例的 this.ctx 指向绘制的目标画布
    • 支持按顺序多次多步绘制
    • 资源请求失败跨过此次绘制

主要功能

  • 支持多次绘制

    • 第一次绘制将绘制处理赋为 Promise 实例存到当前 Cavs 实例的 queue 属性
    • 后续绘制处理放到 Promise 实例的 then 队列，依次绘制

  • 资源就绪后再执行绘制

    • Promise.all(arr)实现，返回结果为响应资源的列表
    • Promise.all(sourceList.map(url => {…请求 url 资源}))

  • 资源请求失败跨过绘制

    • 资源请求回调中将失败的资源作为 undefined 放到 imgList
    • 绘制中判断到当前资源为 undefined 时，则直接跳过

完善功能

  • 默认参数自定义

    • 新建原型属性 defaultOptions
    • 绘制前 Object.assign({}, defaultOptions, json)

  • 支持将默认坐标基准点从左上角修改为中心位置

  • 支持圆角

    • 根据 x, y, h, w 等值计算关键坐标
    • 绘制通过关键坐标的 path(路径) + clip(裁剪)
    • 锯齿优化：根据设备像素比放大画布绘制；弊端：输出图片大小也会根据比例增大

  • 模拟链接转为 base64 格式的二维码图片绘制

    • 使用 qrcode.js 库实现纯前端生成二维码

  • 支持跨域图片资源

    • 跨域图片可被 canvas 绘制，但 canvas 转图片会报错无效
    • 方案 1：img.crossOrigin = ‘’; 禁止服务器响应匿名信息(IE11+)
    • 方案 2：blob+URL.createObjectURL 请求(IE10+)，但 IE9 不支持，即 IE9 下无法请求同源资源
    • 解决：判断是否为跨域资源，再判断是否能成功对跨域资源处理，不能则直接跳过该资源绘制

注意点

  1. 允许设置 css 属性修改 canvas 大小，但画布大小不会自动同步，需手动修改 width/height 属性

  2. 绘制文本默认 x,y 参考点为文字左下方，ctx.textBaseline = ‘top’可设为左上方

  3. 在执行对应类型的绘制处理前，需要对关键参数进行类型检测

相关 API

canvas 转图片

  • base64 图片

    • let src = $canvas.toDataURL(‘image/png’)

  • blob 图片

    • let blob = $canvas.toBlob(blob => let url = URL.createObjectURL(blob) ,’image/png’)

图片转 base64(blob 方式)

fetch("图片资源url", {
  responseType: "blob", // 以blob数据响应/本地上传的图片
})
  .then((res) => res.blob()) // fetch请求的响应需多一步blob解析
  .then((qrcode) => {
    let oFileReader = new FileReader(); // FileReader对象读取为base64
    return new Promise(function (resolve) {
      oFileReader.addEventListener("loadend", function (e) {
        let qrBase64 = e.target.result;
        resolve(qrBase64);
      });
      oFileReader.readAsDataURL(qrcode);
    });
  })
  .then((base64) => {
    处理base64;
  });

其他收获

使用 vorlon.js 调试移动端

  1. 安装 vorlon.js npm i vorlon -g

  2. 启动 vorlon 2.1 $ vorlon 2.2 访问[http://localhost:1337],查看调试面板

  3. 插入 script 在调试 html 下插入<script src=”http://你的 IP 地址:1337/vorlon.js”></script>

  4. 移动端访问测试页面

如何在父元素下监听未来 img 元素的 onload 事件

  • 事件代理+事件捕获
  $parent.addEventListener('load', e => {
    if(e.target.tagName.toLowerCase() === 'img')
    // 事件处理
  }, true);

遇到第三方库未修复的问题？

  • 在对应 github 的 PullRequest 搜索解决方案
    • qrcode 在部分安卓系统无法不生成二维码
    • 搜索到相关 PullRequest
  • google 搜索到添加了回调功能的 respository
CATALOG
    FEATURED TAGS
    JavaScript 类库 vue
    FRIENDS