效果展示

• 先录制的视频，再转化为GIF图片导致展示效果有点延迟，实际效果还是挺丝滑的，感兴趣的可以上手尝试一下
  

人物模型和动画获取

• 在mixamo.com网站，需要先登录一下，可以直接使用Google邮箱登录，然后来到Characters页，下方有100多种人物模型，点击左边卡片可以选择自己喜欢的人物模型，或者如下图和我选的一样
  


• 然后来到Animations页，默认如下图红框内展示的也是刚才我们选择的人物模型，如果右侧展示不对，需要回到Characters页重新选择人物模型
  


• 因为动画比较多，这里我们直接在左上角搜索框内搜索自己想要的动作动画即可，首先搜索Idle，我这里使用的动画是Happy Idle，还将右侧的Overdrive的值从50调整到75，值越大动画频率越快，调整好后直接点击右上方的DOWNLOAD
  


• 弹出的弹窗里的内容都不想要修改，直接点击如下图右下角的DOWNLOAD，等待一会后，选择本地文件夹下载即可
  


• 接着左上角搜索Running，选择Running卡片，并且勾选右侧的In Place，让人物模型在原地跑动；如果不勾选的话，因为动画本身带有位移，会影响我们使用ThreeJS改变人物模型的position控制人物位移的；设置好后直接点击DOWNLOAD，同样弹出的弹窗不需要修改，直接点击弹窗右下角的DOWNLOAD下载即可
  


• 继续左上角搜索Jump，选择Jump卡片，并且勾选右侧的In Place，让人物模型在原地跑动；设置好后直接点击DOWNLOAD，同样弹出的弹窗不需要修改，直接点击弹窗右下角的DOWNLOAD下载即可
  


• 继续左上角搜索Death，选择Falling Back Death卡片，这个动画不需要其他调整，直接点击DOWNLOAD，同样弹出的弹窗不需要修改，直接点击弹窗右下角的DOWNLOAD下载即可
  


• 这样就下载好了Idle(待机动作)、Running(跑步动作)、Jump(跳跃动作)、Death(死亡动作)的一组动作，以上动作的都可以根据个人喜好调整；如果打开mixamo.com网站比较慢或者下载有问题的话，也可以直接使用我下载好的actions里的动画模型
  

动画模型合并

• 打开Blender新建文件选择常规，我使用的版本是3.6.14的，不同版本可能存在差异
  


• 在右上角场景集合内，鼠标左键拖拽框选默认已有的Camera、Cube和Light，然后右键选择删除或者英文输入法下按下x键快速删除；后续在Blender里的所有操作，均需将输入法切换到英文输入；如果对Blender不是特别熟悉，可以优先阅读我之前整理的Blender学习整理这篇文章
  


• 选择左上角菜单栏里文件-->导入-->FBX(.fbx)，就会弹出导入设置弹窗
  


• 弹窗内只需选中之前下载好的Idle.fbx文件，然后直接点击右下角导入FBX即可
  


• 文件导入后，在右上角场景集合内，将动画下一级的目录鼠标双击重命名成idle
  


• 在中间布局窗口，将右上角的视图着色方式切换到材质预览，然后把观察点切换到-X方向，将下方窗口切换到非线性动画
  


• 点击动画右侧的按键，作用是下推动作块(将动作块作为新的片段下推到NLA堆栈顶部)，有点类似展开下拉菜单的效果，实际作用是创建NLA轨道，然后将idle动作放到一个单独的通道中
  


• 取消勾选通道对结果是否有影响(切换通道是否启用)
  


• 导入Running.fbx，导入流程和上述一致，导入后在右上角场景集合内重命名动画下一级目录为running
  


• 同样点击动画右侧的按键，下推动作块
  


• 同样取消勾选通道对结果是否有影响(切换通道是否启用)
  


• 鼠标点击选中idle动作，变成如下图颜色即被选中
  


• 选择上方添加-->添加动作片段
  


• 然后选中running
  


• 这时，在idle动作上方就添加了一个running动作通道，双击左侧如下图红框内重命名为running，左侧的名称就是我们后续使用ThreeJS控制人物模型切换动画时要使用的动作变量名
  


• 在右上角场景集合内，选中后面导入的模型右键后点击删除或者按下x键快速删除，将其删除
  


• 第一次删除可能删除不干净，场景集合内还有多余的文件，布局窗口也有遮挡物，这个遮挡物其实就是第二个模型里的人物建模，第一次只是把动画给删除掉了，所以需要再次如下图选中右侧红框内文件继续删除才能删除干净；注意删除的时候最好把导入的第一个模型收起来，防止误删
  


• 如上述操作后，就把idle动画和running动画合并到一个人物模型里，再重复上述操作，把Jump.fbx和Death.fbx文件依次导入进来，并且把jump动画和death动画添加到idle动画上方，每个动作一个通道；全部搞定后，可以点击如下图红框内的五角星，实心就代表被选中，依次选中每个动作，取消勾选通道影响，还可以按下键盘的空格播放各个动画
  


• 最后选择左上角文件-->导出-->glTF2.0(.glb/.gltf)，会弹出导出设置弹窗
  


• 弹窗内选择本地合适的文件夹，直接点击右下角的导出glTF2.0即可
  


• 可以参考我仓库里的models里的actions.glb
  

跨栏和跑道模型获取

• 在sketchfab.com网站，首先需要先登录，同样可以使用Google邮箱登录，然后在搜索框输入hurdle，按下回车
  


• 然后可以在下方很多的跨栏模型中选择自己喜欢的，我这里选择的是Wii - Wii Play - Hurdle
  


• 点击模型左下角的Download 3D Model，会弹出下载选项弹窗
  


• 弹窗里选择下载GLB格式的文件，这个格式会将所有内容(包含模型的结构、材质、动画和其他元数据等)打包在一起，文件大小可能会更大，但管理方便，所有内容都在一个文件中
  


• 下载到本地后，重命名为hurdle.glb
  


• 同样的方式，搜索track，我这边使用的模型是Dusty foot path way in grass garden，忘记了当时的筛选条件了，怎么就在搜索track的时候找到了这个模型；因为需要游戏里面的跑道不间断的出现，所以需要这种能够重复拼接的跑道模型，大家也可以自行选择喜欢的模型，下载好后，本地重命名为track.glb
  


• 如果访问sketchfab.com网站比较慢，或者下载有问题的话，可以直接使用我仓库里的models里的hurdle.glb和track.glb
  

模型合并

• 为了和之前的内容不搅合，就不在之前的actions.blender文件里添加其他两个模型，这里使用Blender新建一个常规文件，同样删除默认的Camera、Cube和Light
  


• 选择左上角文件-->导入-->glTF2.0(.glb/.gltf)，会弹出导入弹窗
  


• 选择之前保存的actions.glb，直接点击右下角的导入glTF2.0即可
  


• 导入后，同样把视图着色方式切换到材质预览，观察点切换到—X方向上
  


• 在右上角的场景集合内，将当前模型重命名为acitons
  


• 导入下载好的hurdle.glb，在右上角的场景集合内，刚导入的模型只有最里面的Object_2才是真的跨栏网格对象，外面两层结构没有作用，还可能出现外层结构的旋转缩放等属性和内部实际的网格对象的属性不一致，影响我们对实际网格对象的控制，所以最好删除掉
  


• 依次选中外面两层文件，按下x键删除，最后把Object_2重命名为hurdle
  


• hurdle模型尺寸比较大，旋转方向也不对，鼠标左键选中hurdle模型，然后在属性栏，将旋转的X调整成-1.0，将缩放的XYZ全部调整成0.1，这里不需要调整的特别精确，后续编码时还能使用ThreeJS继续调整模型的旋转和尺寸；如果布局窗口没有属性栏，可以按下n键显示/隐藏属性栏；输入值时，鼠标拖动三个输入框能够同时改变XYZ的值
  


• 继续选中hurdle模型，按下ctrl + a然后选择全部变换，需要把之前调整的旋转和缩放应用为自身数据
  


• 导入下载好的track.glb，可以切换右侧红框的眼睛图标显示/隐藏该对象来观察整体模型变化，会发现实际起作用的是Object_2和Object_3的两个网格对象，两个外层结构的显示/隐藏看似对模型的显示没有影响，其实它们是有属性是对模型有影响的，需要把它们的属性变换应用到自身
  


• 在右上角场景集合选中第一层结构，在属性栏会发现它有一些旋转和缩放，在布局窗口按下ctrl+a，然后选择应用全部变换；再选中第二层结构，同样按下ctrl+a应用全部变换
  


• 这时就会发现，外层的旋转和缩放都已经作用到Object_2和Object_3的两个网格对象上了，就可以依次选中两个外层结构，按下x键删除两个外层结构了；并且依次选中Object_2和Object_3的两个网格对象按下ctrl+a选择全部变换把外层结构的旋转和缩放应用到自身
  


• 然后在右上角场景集合内，鼠标先选中Object_3，按下shift键再选中Object_2，然后鼠标回到布局窗口，按下ctrl+p选择物体，这里发现Object_2变成了Object_3的子级了，理论上最后被选中的对象是父级，我想要的效果是Object_3变成了Object_2的子级，所以这里我又撤销(ctrl+z)重新先选中Object_2，按下shift键再选中Object_3，再按下ctrl+p选择物体绑定的父子关系；这里不清楚是因为我使用中文翻译的问题还是Blender有更新，有了解的大佬希望帮忙解释一下
  


• 将合并后的父级Object_2重命名为track
  


• 左键选中track模型，右键选择设置原点-->原点->几何中心
  


• 在选中track模型的情况下，继续按下shift+s选择选中项->游标，如果游标没有在世界原点，需要先将游标设置到世界原点
  


• 将观察点切换到顶视图，按下r+z绕着Z轴旋转，使跑道的长边和Y轴平行
  


• 再切换到-X方向，按下r+x绕着X轴旋转，使跑道的上面和Y轴平行
  


• 选择左上角文件-->导出-->glTF2.0(.glb/.gltf)
  


• 导出设置弹窗内，直接将合并后的模型导出到我们后续编码要用的文件夹内，其他无需设置，直接选择导出glTF2.0即可
  

编码渲染

• 使用vite搭建的项目工程，完整源码点这里code，整个渲染过程都在src/hooks/userDraw.js文件里
  


• 首先是ThreeJS的基础代码，放到了src/hooks/modules/base.js文件里，我这里只是往scene添加了一个背景纹理，最后就是把scene、camera、renderer暴露出来方便其他模块引用

import * as THREE from 'three';



/**

 * 基础代码

 */

export default function () {

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(

        75,

        window.innerWidth / window.innerHeight,

        0.1,

        1000

    );

    camera.position.set(0, 0, 5); // 设置相机位置

    const renderer = new THREE.WebGLRenderer({

        antialias: true // 开启抗锯齿

    });

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);



    // 加载背景纹理

    const textureLoader = new THREE.TextureLoader();

    textureLoader.load('./bg.jpeg', function (texture) {

        // 将纹理设置为场景背景

        scene.background = texture;

    });



    // 适配窗口

    window.addEventListener('resize', () => {

        camera.aspect = window.innerWidth / window.innerHeight; // 重置摄像机视锥体的长宽比

        camera.updateProjectionMatrix(); // 更新摄像机投影矩阵

        renderer.setSize(window.innerWidth, window.innerHeight); // 重置画布大小

    });



    return {

        scene,

        camera,

        renderer

    };

}

• 在src/hooks/modules/controls.js文件里添加控制器，并且需要禁用控制器

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';



/**

 * 控制器

*/

export default function (camera, renderer) {

    const orbitControls = new OrbitControls(camera, renderer.domElement); // 轨道控制器

    orbitControls.enabled = false; // 禁用控制器

    orbitControls.update(); // 更新控制器

}

• 在src/hooks/modules/light.js文件里添加环境光，上下方各添加了一个平行光

import * as THREE from 'three';



/**

 * 灯光

 */

export default function (scene) {

    const ambientLight = new THREE.AmbientLight(0x404040, 20); // 环境光

    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 5); // 平行光

    directionalLight.position.set(0, 10, 5);

    scene.add(directionalLight);

    const directionalLight2 = new THREE.DirectionalLight(0xffffff, 5); // 平行光

    directionalLight2.position.set(0, -10, -5);

    scene.add(directionalLight2);

}

• src/hooks/userDraw.js文件没有进一步优化，下面主要介绍几个核心部分
  
  
  
  • 把之前合并好的模型，使用GLTFLoader加载进来，然后初始化人物、跨栏、跑道等模型；因为模型的XYZ轴向和ThreeJS的没有对应上，所以需要给各个模型创建一个Gr0up方便单独控；获取跑道宽度时，因为获取的不是特别准确，所以又减去了2，让跑道叠加在一起了，不是特别严丝合缝；然后就是创建动画混合器，把动作保存起来了，然后默认播放待机动作；最后开始帧循环渲染
  
  
  
  

  // 加载人物模型
  
  const loader = new GLTFLoader();
  
  loader.load('./models/group.glb', function (gltf) {
  
      const children = [...gltf.scene.children];
  
  
  
      // 初始化人物模型
  
      global.characterGr0up.add(children[0]);
  
      global.characterGr0up.rotation.set(0, Math.PI / 2, 0); // 改变人物朝向
  
      scene.add(global.characterGr0up);
  
  
  
      // 初始化跨栏模型
  
      global.hurdleGr0up.add(children[1]);
  
      global.hurdleGr0up.scale.set(0.7, 0.7, 0.7); // 缩小跨栏
  
      global.hurdleGr0up.rotation.set(0, Math.PI / 2, 0); // 改变跨栏朝向
  
      global.hurdleGr0up.position.set(3, 0, 0); // 设置第一个跨栏位置
  
      global.hurdleArr.push(global.hurdleGr0up); // 添加第一个跨栏触发碰撞检测
  
      scene.add(global.hurdleGr0up);
  
  
  
      // 初始化跑道模型
  
      global.trackGr0up.add(children[2]);
  
      global.trackGr0up.rotation.set(0, Math.PI / 2, 0); // 改变跑道朝向
  
      scene.add(global.trackGr0up);
  
  
  
      // 获取跑道宽度
  
      const boundingBox = new THREE.Box3().setFromObject(global.trackGr0up); // 创建包围盒
  
      const size = new THREE.Vector3(); // 计算包围盒的尺寸
  
      boundingBox.getSize(size);
  
      global.trackWidth = size.x - 2; // 跑道宽度不是特别准确，需要模糊计算
  
      // 默认使用trackNum个跑道拼接
  
      for (let i = 0; i < trackNum; i++) {
  
          const newTrackModel = global.trackGr0up.clone(); // 克隆原始跑道模型
  
          newTrackModel.position.x = i * global.trackWidth; // 按照宽度依次排列
  
          scene.add(newTrackModel);
  
          global.trackArr.push(newTrackModel); // 保存引用
  
      }
  
  
  
      // 创建动画混合器
  
      global.animationMixer = new THREE.AnimationMixer(global.characterGr0up);
  
  
  
      // 将每个动画剪辑存储在actions对象中
  
      gltf.animations.forEach((clip) => {
  
          global.actions[clip.name] = global.animationMixer.clipAction(clip);
  
      });
  
  
  
      // 播放默认的 idle 动作
  
      global.currentAction = global.actions['idle'];
  
      global.currentAction.play();
  
  
  
      // 开始渲染循环
  
      animate();
  
  });
  
  

  
  
  
  
  • animate函数里主要功能有开启帧循环；更新动画混合器；在跳跃动作结束后切换回跑步动作；当人物处于跑步和跳跃动作时，更新人物位置及让相机跟随人物移动，并且在移动过程中，在间隔帧数内生成新的跨栏；更新跑道的位置，如果最左侧的跑道超出屏幕后，把它移动到最右侧；当人物处于跳跃动作时，更新人物Y轴位置；如果人物和跨栏发生碰撞时，切换到死亡动作并且开启死亡状态，防止键盘按键还能继续触发；当播放完死亡动作后，提示游戏结束，并结束帧数循环；渲染场景
  
  
  
  

  function animate() {
  
      global.frame = requestAnimationFrame(animate); // 开启帧循环
  
  
  
      global.animationMixer.update(global.clock.getDelta()); // 更新动画混合器
  
  
  
      // 检查 jump 动作是否完成，并恢复到 running 动作
  
      if (
  
          global.currentAction === global.actions['jump'] &&
  
          global.currentAction.time >= global.currentAction.getClip().duration
  
      ) {
  
          switchAction('running', 0.3);
  
      }
  
  
  
      // 当处于 running 动作时，移动相机
  
      if (
  
          global.currentAction === global.actions['running'] ||
  
          global.currentAction === global.actions['jump']
  
      ) {
  
          global.characterGr0up.position.x += moveSpeed;
  
          camera.position.x = global.characterGr0up.position.x;
  
  
  
          // 间隔随机帧数生成跨栏
  
          if (
  
              global.hurdleCountFrame++ >
  
              hurdleInterval + Math.random() * hurdleInterval
  
          ) {
  
              generateHurdles(global.hurdleGr0up, global.hurdleArr, scene); // 生成跨栏
  
              global.hurdleCountFrame = 0;
  
          }
  
      }
  
  
  
      // 更新跑道位置
  
      updateTrack(camera, global.trackArr, global.trackWidth);
  
  
  
      // 当人物处于跳跃动作时，更新人物位置
  
      updateCharacterPosition(
  
          global.animationMixer,
  
          global.clock,
  
          global.currentAction,
  
          global.actions,
  
          global.characterGr0up
  
      );
  
  
  
      // 碰撞检测
  
      if (
  
          checkCollisions(
  
              global.characterGr0up,
  
              global.characterBoundingBox,
  
              global.hurdlesBoundingBoxes,
  
              global.hurdleArr
  
          )
  
      ) {
  
          switchAction('death');
  
          global.isDeath = true;
  
      }
  
  
  
      // 如果 death 动作完成了，则停止帧动画
  
      if (
  
          global.currentAction === global.actions['death'] &&
  
          !global.currentAction.isRunning()
  
      ) {
  
          Modal.error({
  
              title: 'Game Over',
  
              width: 300
  
          });
  
          cancelAnimationFrame(global.frame);
  
      }
  
  
  
      // 渲染场景
  
      renderer.render(scene, camera);
  
  }
  
  

  
  
  
  
  • 切换动作函数主要是在一定时间内淡出前一个动作，并且淡入新动作，如果是跳跃动作或者死亡动作的话只执行一次
  
  
  
  

  function switchAction(newActionName, fadeDuration = 0.5) {
  
      const newAction = global.actions[newActionName];
  
      if (newAction && global.currentAction !== newAction) {
  
          global.previousAction = global.currentAction; // 保留当前的动作
  
          // 淡出前一个动作
  
          if (global.previousAction) {
  
              global.previousAction.fadeOut(fadeDuration);
  
          }
  
  
  
          // 如果切换到 jump 动作，设置播放一次并在结束后停止
  
          if (newActionName === 'jump') {
  
              newAction.loop = THREE.LoopOnce;
  
              newAction.clampWhenFinished = true; // 停止在最后一帧
  
          }
  
  
  
          // 如果切换到 death 动作，设置播放一次并在结束后停止
  
          if (newActionName === 'death') {
  
              newAction.loop = THREE.LoopOnce;
  
              newAction.clampWhenFinished = true; // 停止在最后一帧
  
          }
  
          global.currentAction = newAction; // 设置新的活动动作
  
  
  
          // 复位并淡入新动作
  
          global.currentAction.reset();
  
          global.currentAction.setEffectiveTimeScale(1);
  
          global.currentAction.setEffectiveWeight(1);
  
          global.currentAction.fadeIn(fadeDuration).play();
  
      }
  
  }
  
  

  
  
  
  
  • 键盘事件监听，给按键WSAD和方向键上下左右都添加了切换动作的功能，如果是死亡状态的，按键失效
  
  
  
  

  window.addEventListener('keydown', (event) => {
  
      if (global.isDeath) {
  
          return;
  
      }
  
      switch (event.code) {
  
          case 'keyD':
  
          case 'ArrowRight':
  
              switchAction('running');
  
              break;
  
          case 'keyA':
  
          case 'ArrowLeft':
  
              switchAction('idle');
  
              break;
  
          case 'keyW':
  
          case 'ArrowUp':
  
              switchAction('jump');
  
              break;
  
      }
  
  });
  
  

  
  


• src/configs/index.js文件配置了一些常量，可以用来控制游戏状态

// 初始跑道数量

export const trackNum = 3;



// 跨栏之间的间隔帧数

export const hurdleInterval = 50; // 50～100帧之间



// 跨栏之间的间隔最小距离

export const hurdleMinDistance = 5; // 5～10距离之间



// 人物移动的速度

export const moveSpeed = 0.03;

• src/utils/index.js文件主要是一些辅助函数

import * as THREE from 'three';

import { hurdleMinDistance } from '../configs/index';



/**

 * 生成新的跨栏

 *

 * @param {Object} oldModel - 要克隆的原始跨栏模型。

 * @param {Array} hurdleArr - 现有跨栏模型的数组。

 * @param {Object} scene - 要添加新跨栏模型的场景。

 * @return {undefined}

 */

export function generateHurdles(oldModel, hurdleArr, scene) {

    const newModel = oldModel.clone(); // 克隆原始跨栏模型



    const nextPosition =

        hurdleArr[hurdleArr.length - 1].position.x +

        hurdleMinDistance +

        Math.random() * hurdleMinDistance;



    newModel.position.set(nextPosition, 0, 0);

    hurdleArr.push(newModel);

    scene.add(newModel);

}



/**

 * 更新跑道位置

 *

 * @param {Object} camera - 具有位置属性的摄像机对象。

 * @param {Array} trackArr - 具有位置属性的轨道段对象数组。

 * @param {Number} trackWidth - 每个轨道段的宽度。

 * @return {undefined}

 */

export function updateTrack(camera, trackArr, trackWidth) {

    const cameraPositionX = camera.position.x; // 相机的 x 坐标

    // 遍历所有跑道段

    for (let i = 0; i < trackArr.length; i++) {

        const trackSegment = trackArr[i];

        // 提前检测跑道段是否即将超出视野（增加一个提前量，比如半个跑道段的宽度）

        const threshold = cameraPositionX - trackWidth * 1.5;

        if (trackSegment.position.x < threshold) {

            // 找到当前最右边的跑道段

            let maxX = -Infinity;

            for (let j = 0; j < trackArr.length; j++) {

                if (trackArr[j].position.x > maxX) {

                    maxX = trackArr[j].position.x;

                }

            }

            // 将当前跑道段移动到最右边

            trackSegment.position.x = maxX + trackWidth;

        }

    }

}



/**

 * 人物跳跃时，更新人物Y轴位置

 *

 * @param {Object} animationMixer - 动画混合器对象。

 * @param {Object} clock - 用于获取增量时间的时钟对象。

 * @param {Object} currentAction - 当前正在执行的动作。

 * @param {Object} action - 可用动作的集合。

 * @param {Object} characterGr0up - 角色组对象。

 * @return {undefined}

 */

export function updateCharacterPosition(

    animationMixer,

    clock,

    currentAction,

    actions,

    characterGr0up

) {

    // 更新动画混合器

    animationMixer.update(clock.getDelta());



    // 检查动画状态并调整位置

    if (currentAction === actions['jump']) {

        // 根据跳跃动画的时间调整人物位置

        const jumpHeight = 0.8; // 你可以调整这个值

        characterGr0up.position.y =

            Math.sin(currentAction.time * Math.PI) * jumpHeight;

    } else {

        characterGr0up.position.y = 0; // 恢复到地面位置

    }

}



/**

 * 检测人物是否与跨栏发生了碰撞

 *

 * @param {Object} characterGr0up - 角色组对象。

 * @param {Object} characterBoundingBox - 角色的边界框对象。

 * @param {Array} hurdlesBoundingBoxes - 跨栏的边界框数组。

 * @param {Array} hurdleArr - 跨栏对象数组。

 * @return {Boolean} 是否发生了碰撞。

 */

export function checkCollisions(

    characterGr0up,

    characterBoundingBox,

    hurdlesBoundingBoxes,

    hurdleArr

) {

    // 更新人物的边界框

    if (characterGr0up) {

        characterBoundingBox.setFromObject(characterGr0up);

    }



    // 更新跨栏的边界框

    hurdlesBoundingBoxes = hurdleArr.map((hurdle) => {

        const box = new THREE.Box3();

        box.setFromObject(hurdle);

        return box;

    });



    for (let i = 0; i < hurdlesBoundingBoxes.length; i++) {

        if (characterBoundingBox.intersectsBox(hurdlesBoundingBoxes[i])) {

            return true; // 检测到碰撞

        }

    }

    return false; // 没有检测到碰撞

}

不足

• 跑道的纹理和材质没有渲染出来，不知道是否是导出的模型有问题，有懂的大佬可以帮忙看看


• 目前合并后的模型导出后体积比较大，还需要解决模型压缩的问题

0.基础

0.0解决的痛点

它可以在不修改原有类的情况下，扩展新的操作，而策略模式则需要改变上下文类来引入新的策略。

• 扩展性更强
  
  
  
  
  • 访问者模式使得你可以在不修改现有类的情况下添加新的操作。假设你有多个对象构成的复杂结构，并且要在这些对象上执行不同的操作。
  
  
  • 使用访问者模式，你可以为每个对象定义一个访问者，而每次需要添加新的操作时，只需要增加一个新的访问者类。这样，原有类不会被修改，符合开闭原则（对扩展开放，对修改关闭）。
  
  
  • 相反，策略模式更多是通过替换算法来改变行为。如果你的业务逻辑复杂，需要在同一个对象中实现多个策略，频繁地改变策略可能会导致对象内部逻辑变得非常复杂，增加维护成本。
  
  
  
  


• 职责单一，逻辑分离
  
  
  
  
  • 访问者模式将行为与对象结构分离，访问者本身只关心如何对不同对象执行操作，而不需要关心对象的具体实现。这种方式将操作逻辑与数据结构解耦，符合单一职责原则。
  
  
  • 策略模式中，每种策略会嵌入到目标对象中，这会使得目标对象承担过多的责任，尤其是在需要处理大量策略的情况下，会导致对象变得非常臃肿。
  
  
  
  


• 操作集中统一管理
  
  
  
  
  • 使用访问者模式时，所有的操作都集中在访问者类中进行管理。
  
  
  • 假设有多个元素需要执行不同的操作，访问者模式将这些操作集中到访问者中，避免了分散在各个策略中的问题，便于管理和维护。
  
  
  • 策略模式则往往需要将每个策略分散在不同的策略类中，随着策略增多，管理和维护会变得越来越困难，尤其是当策略之间有依赖或交互时，复杂性会迅速增加。
  
  
  
  


• 适合复杂结构对象的处理
  
  
  
  
  • 访问者模式特别适合在对象结构复杂且需要遍历的场景中使用。
  
  
  • 例如，树形结构或对象图的遍历，这时每个节点的处理逻辑可以独立出来，并通过访问者来实现。
  
  
  • 访问者可以对这些节点类型的元素进行访问和操作，无需修改元素类本身。
  
  
  • 策略模式一般用于动态地改变同一对象的行为，不适合处理复杂的对象结构，特别是当需要在多个元素中进行遍历和操作时，策略模式会显得不够灵活。
  
  
  
  


• 总结：
  
  
  
  
  • 访问者模式更适合在你需要对复杂结构的对象执行多个操作，并且希望操作与对象本身分离的场景。
  
  
  • 它更方便扩展，避免了复杂的继承结构或不断修改已有类。
  
  
  • 而策略模式则适合于在单一对象上动态替换行为，但对于复杂对象结构的处理往往会导致逻辑分散，扩展性差。
  
  
  
  

0.1代码结构图

0.2业务流程图

0.3请求Json

localhost:8080/VisitorPattern/calculateDiscount

    POST类型

    ["electronics", "clothing", "food"]

​

1.代码结构

1.1Pojo

package com.xiaoyongcai.io.designmode.pojo.VisitorPattern;

​

public interface Product {

    void accept(ProductVisitor visitor);

}

​

package com.xiaoyongcai.io.designmode.pojo.VisitorPattern;

​

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl.Clothing;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl.Electronics;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl.Food;

​

public interface ProductVisitor {

    void visit(Electronics electronics);

    void visit(Clothing clothing);

    void visit(Food food);

}

​

package com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl;

​

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.Product;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductVisitor;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

​

@Data

@AllArgsConstructor

@NoArgsConstructor

public class Clothing implements Product {

    private double price;

    @Override

    public void accept(ProductVisitor visitor) {

        visitor.visit(this);  // 传递给访问者

    }

}

​

package com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl;

​

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.Product;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductVisitor;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

​

@Data

@AllArgsConstructor

@NoArgsConstructor

public class Electronics implements Product {

    private double price;

    @Override

    public void accept(ProductVisitor visitor) {

        visitor.visit(this);  // 传递给访问者

    }

}

​

package com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl;

​

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.Product;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductVisitor;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

​

@Data

@AllArgsConstructor

@NoArgsConstructor

public class Food implements Product {

    private double price;

    @Override

    public void accept(ProductVisitor visitor) {

        visitor.visit(this);  // 传递给访问者

    }

}

​

package com.xiaoyongcai.io.designmode.pojo.VisitorPattern.VisitorImpl;

​

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl.Clothing;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl.Electronics;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl.Food;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductVisitor;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

import lombok.extern.slf4j.Slf4j;

​

@Data

@AllArgsConstructor

@NoArgsConstructor

@Slf4j

public class DiscountVisitor implements ProductVisitor {

    private double totalDiscount = 0;

    @Override

    public void visit(Electronics electronics) {

        //电子产品打八折

        totalDiscount += electronics.getPrice()*0.2;

        log.info("[访问者模式]：电子产品打8折后价格为"+electronics.getPrice()*0.2+"原价为"+electronics.getPrice());

​

    }

​

    @Override

    public void visit(Clothing clothing) {

        //衣物商品打7折

        totalDiscount+=clothing.getPrice()*0.3;

        log.info("[访问者模式]衣物商品打7折后价格为"+clothing.getPrice()*0.2+"原价为"+clothing.getPrice());

    }

​

    @Override

    public void visit(Food food) {

        //食品商品打9折

        totalDiscount += food.getPrice()*0.1;

        log.info("[访问者模式]食品商品打9折后价格为"+food.getPrice()*0.2+"原价为"+food.getPrice());

    }

}

​

1.2Service

package com.xiaoyongcai.io.designmode.Service.VisitorPattern;

​

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.Product;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.VisitorImpl.DiscountVisitor;

import org.springframework.stereotype.Service;

​

import java.util.List;

​

@Service

public class ProductService {

​

    public double calculateTotalDiscount(List<Product> products) {

        // 创建一个DiscountVisitor实例

        DiscountVisitor discountVisitor = new DiscountVisitor();

​

        // 遍历每个商品，执行折扣计算

        for (Product product : products) {

            product.accept(discountVisitor);

        }

​

        // 返回总折扣

        return discountVisitor.getTotalDiscount();

    }

}

​

1.3Controller

package com.xiaoyongcai.io.designmode.Controller.VisitorPattern;

​

import com.xiaoyongcai.io.designmode.Service.VisitorPattern.ProductService;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.Product;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl.Clothing;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl.Electronics;

import com.xiaoyongcai.io.designmode.pojo.VisitorPattern.ProductImpl.Food;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.*;

​

import java.util.ArrayList;

import java.util.List;

​

@RestController

@RequestMapping("VisitorPattern")

public class ProductController {

​

    @Autowired

    private ProductService productService;

​

    @PostMapping("/calculateDiscount")

    public String calculateDiscount(@RequestBody List<String> productTypes) {

        List<Product> products = new ArrayList<>();

​

        // 根据传入的商品类型，创建不同的商品实例

        for (String type : productTypes) {

            switch (type) {

                case "electronics":

                    products.add(new Electronics(100));  // 假设价格是100

                    break;

                case "clothing":

                    products.add(new Clothing(150));    // 假设价格是150

                    break;

                case "food":

                    products.add(new Food(50));         // 假设价格是50

                    break;

            }

        }

        productService.calculateTotalDiscount(products);

        // 调用Service层计算折扣

        return "请在控制台检查访问者模式是否工作";

    }

}

​

这段时间 weapp-vite 的功能更新与优化

自从上次宣布 weapp-vite 的发布，已经过去三个月；weapp-vite 也逐渐迭代至 1.7.6 版本。

在此期间，我对其进行了多项功能的增强和优化，接下来我将为大家详细介绍近期的阶段性成果。

下面列出的功能皆为增强特性，开发者可自由选择启用或关闭，不影响原生小程序的兼容性。

核心功能更新

1. 自动构建 npm

在项目启动时，weapp-vite 会自动构建 npm 依赖，无需再手动点击微信开发者工具中的 构建 npm，提升了一定程度的开发体验。

详细信息请参考：自动构建 npm 文档。

2. 语法增强

2.1 JSON 文件增强

1. 支持注释

weapp-vite 支持在项目中的 JSON 文件中添加注释。例如：

{

  /* 这是一个组件 */

  "component": true,

  "styleIsolation": "apply-shared",

  "usingComponents": {

    // 导航栏组件

    "navigation-bar": "@/navigation-bar/navigation-bar"

  }

}

这些注释会在最终产物内被去除。

注意： project.config.json 和 project.private.config.json 不支持注释，因为这些文件直接由微信开发者工具读取。

2. 智能提示

我生成了许多小程序的 $schema 文件，部署在 vite.icebreaker.top 上。

通过指定 JSON 的 $schema 字段，实现了配置文件的智能提示功能，优化了一点点开发体验。

详见：JSON 配置文件的智能提示。

3. 别名支持

可以在 vite.config.ts 中配置 jsonAlias.entries 字段, 在 usingComponents 中使用别名定义路径，这些在构建时会自动转化为相对路径。

例如:

import type { UserConfig } from 'weapp-vite/config'

import path from 'node:path'



export default <UserConfig>{

  weapp: {

    jsonAlias: {

      entries: [

        {

          find: '@',

          replacement: path.resolve(__dirname, 'components'),

        },

      ],

    },

  },

}

那么就可以在 json 中这样编写:

{

  "usingComponents": {

    "navigation-bar": "@/navigation-bar/navigation-bar",

    "ice-avatar": "@/avatar/avatar"

  }

}

构建结果：

{

  "usingComponents": {

    "navigation-bar": "../../components/navigation-bar/navigation-bar",

    "ice-avatar": "../../components/avatar/avatar"

  }

}

4. 编程支持

weapp-vite 支持使用 JS/TS 文件来编写 JSON，你需要将 component.json 更改为 component.json.ts：

智能提示定义 API 都在 weapp-vite/json 中导出

比如普通写法:

import { defineComponentJson } from 'weapp-vite/json'



export default defineComponentJson({

  component: true,

  styleIsolation: 'apply-shared',

  usingComponents: {},

})

还支持引入异步数据、编译时变量或其他文件：

import type { Page } from 'weapp-vite/json'

import fs from 'node:fs/promises'

import path from 'node:path'

import shared0 from '@/assets/share'

import shared1 from './shared.json'



console.log('import.meta.env: ', import.meta.env)

console.log('import.meta.dirname: ', import.meta.dirname)

console.log('MP_PLATFORM: ', import.meta.env.MP_PLATFORM)

console.log(import.meta.env.DEV, import.meta.env.MODE, import.meta.env.PROD)

const key = await fs.readFile(

  path.resolve(import.meta.dirname, 'x.txt'),

  'utf8'

)



export default <Page>{

  usingComponents: {

    't-button': 'tdesign-miniprogram/button/button',

    't-divider': 'tdesign-miniprogram/divider/divider',

    'ice-avatar': '@/avatar/avatar',

  },

  ...shared0,

  ...shared1,

  key,

}

2.2 WXML 文件增强

事件绑定语法糖

weapp-vite 借鉴了 Vue 的事件绑定风格，为 WXML 增加了事件绑定语法糖：

这里我们以最常用的 tap 事件为例:

<!-- 原始代码 -->

<view @tap="onTap"></view>

<!-- 编译后 -->

<view bind:tap="onTap"></view>

支持的事件绑定增强规则如下：

详见：事件绑定增强文档。

这部分还能做的更多，欢迎与我进行讨论！

2.3 WXS 增强

编程支持（实验性）

weapp-vite 为 WXS 提供了 JS/TS 编程支持，支持通过更改 wxs 后缀为 wxs.js 或 wxs.ts 文件定义逻辑：

比如 index.wxs.ts:

export const foo = '\'hello world\' from hello.wxs.ts'



export const bar = function (d: string) {

  return d

}

另外内联 WXS 也支持使用 lang="js" 或 lang="ts" 直接启用编译功能:

<view>{{test.foo}}</view>

<view @tap="{{test.tigger}}">{{test.abc}}</view>



<wxs module="test" lang="ts">

const { bar, foo } = require('./index.wxs.js')

const bbc = require('./bbc.wxs')

export const abc = 'abc'



export function tigger(value:string){

  console.log(abc)

}



export {

  foo,

  bar,

  bbc

}

</wxs>

详情请参考：Wxs 增强。

3. 生成脚手架

weapp-vite 内置了生成脚手架工具，可快速生成一系列文件（如 js、wxml、wxss 和 json），用于提升开发效率。

最基础的用法只需要 weapp-vite g [outDir]

详情请参考：生成脚手架文档。

4. 分包支持

针对普通分包和独立分包的加载需求进行了优化，用户几乎无需额外配置即可实现分包加载。

尤其是独立分包的场景，创建了独立的编译上下文。

详情请参考：分包加载文档。

不忘初心，持续改进

weapp-vite 的初衷是实现对原生小程序的增强，现有原生小程序几乎可以零成本地迁移过来，并享受更高效的开发体验。

在此，希望各位开发者试用，欢迎反馈与参与。

如果您对文中的任何功能或增强有疑问、建议，欢迎到 Github Discussions 提出讨论！

前言

内存，作为计算机系统中存储数据和指令的关键资源，其管理效率直接影响着程序的性能和稳定性。在JavaScript的世界里，理解内存机制并非遥不可及，每一位开发者必须面对并掌握的实用技能。无论是初涉开发的新手，还是经验丰富的老手，深入理解JavaScript的内存机制都是通往更高层次编程能力的必经之路。

语言类型

静态语言

静态语言是指在编译时变量的数据类型就已经确定的语言，比如java定义一个整数类型需要先用int去定义一个变量。这类语言在编写程序时，要求开发者明确地声明变量的类型，并且在程序的整个生命周期内，该变量的类型都不能改变。换句话说，静态语言的类型检查是在编译阶段完成的，而不是在运行时，常见的静态语言包括Java、C++、C#、Go等。

动态语言

动态语言（Dynamic Language），也称为动态编程语言或动态类型语言，与静态语言相反，是指在程序运行时可以改变其结构的语言。这种改变可能包括引进新的函数、删除已有的函数，或者在运行时确定变量的类型等。动态语言的特点使得它们通常具有更高的灵活性和表达能力。常见的动态语言有我们学的JavaScript，还有Python,PHP等。

弱类型语言

弱类型语言是指变量的类型检查和转换方式相对宽松的一种编程语言。在弱类型语言中，变量可以在不明确声明类型的情况下直接使用，并且在运行时可以自动改变类型，或者可以在不同类型之间自由进行操作和转换，常见的弱类型语言包括JavaScript、Python等。

强类型语言

强类型语言（Strongly Typed Language）是一种在编译时期就进行类型检查的编程语言。这类语言要求变量在使用前必须明确声明其类型，并且在使用过程中，变量的类型必须保持一致，不能随意更改，常见的强类型语言包括Java、C++、C#、Go等。

数据类型

在每种语言里面都会有一个方法去查看数据的类型，js也不例外，我们可以用typeof去查看一个数据的类型，那我们来看看js中所有的数据类型吧

let a = 1

// console.log(typeof a);  //Number

a = 'hello'

// console.log(typeof a);  //String

a = true

// console.log(typeof a);  //boolean

a = null

// console.log(typeof a);  //object

a = undefined

// console.log(typeof a);  //undefined

a = Symbol(1)

// console.log(typeof a);  //symbol

a = 123n

// console.log(typeof a);  //bigint

a = []

// console.log(typeof a);  // object

a = {}

// console.log(typeof a);  //object

a = function () {}

// console.log(typeof a);  // function

我们可以看到所有判断类型的结果，大部分还正常，可是数组和null怎么也被判断成了object类型呢？

那我们要来了解一下typeof的判断原理，怎么给a判断出来它的数据类型的呢，其实是通过转换为计算机能看懂的二进制，然后通过二进制的数据进行的分析，所有的引用类型转换成二进制前三位一定是零，然后数组是引用类型，而typeof判断时如果前三位是零，那么就无脑认为它是object类型，但是函数是一个特例，在js中函数是一个对象，它做了一些特殊操作，所以能够判断出来，但是null是原始数据类型，为什么也能被判断为object类型呢，因为null在被读取成二进制时，它会被读取为全是零。而这个不是编程语言能够决定的，在计算机创建出来时就是这样设定的，因此这是一个bug，在设计这门语言的的bug,这个bug如果要修复并不困难，但是一旦修复，所有用js语言开发的项目都需要修复，影响太大，因此这个bug就被默认为js语言里面的规则。

内存空间

内存空间的分布

在v8引擎执行你写的代码时，会占用一部分的运行空间，而执行时占用的内存空间在v8的视角里会被分布成这个样子的

代码空间是专门存储你所写的代码，栈空间就是我们之前讲过的调用栈juejin.cn/post/743706…

用来存储函数被调用时，它的执行上下文，维护函数的调用关系，调用栈被分布的空间是比较小的。

堆空间（Heap Space）是内存管理的一个重要部分，它用于存储动态分配的对象和数据结构。

栈和堆之间的关系

让我们来看看栈和堆之间的关系

function foo() {

    var a = 1

    var b = a

    var c = {name: '熊总'}

    var d = c

  }

  foo()

此时foo函数已经完成编译，且已经执行到了b=a这一行，然后将一个对象赋值给c的时候，并不会直接把这个对象存储在函数的执行上下文里面，而是会在旁边在创建一个堆空间，将对象存储在堆空间里面，而这个c存储的就是对象在堆空间的地址值

然后在执行将c的值赋给d其实就是将对象的地址值赋值给了d，因此c和d的地址值指向的是同一个对象，并没有创建出一个新的对象，如果这个对象发生改变，那么c和d所代表的对象都会发生改变。

那为什么原始数据类型可以直接存储在栈当中，而引用数据类型却要存储在堆空间里面，因为原始类型数据所占的空间小，而引用数据类型所占的空间较大，比如一个对象，它可以有无数个属性，而原始类型，它就只有一个固定的值，所占内存不大，而栈被分布的空间比较小，堆被分布的空间比较大，因此原始数据类型可以直接存储在栈当中，而引用数据类型要存储在堆当中。

栈设计为什么这么小

首先我们要明白栈是用来维护函数的调用关系，而如果将栈设计的很大，那么程序员就可以写很长作用域链，并且不考虑代码的执行效率，写出不断嵌套的屎山代码。举个例子，栈就好比在你身上的空间，比如你的衣服裤子口袋，而堆就相当于一个分层的柜子，你把衣服上的口袋设计的很大，不要柜子，把你的东西全部装在口袋里面，首先看起来就十分丑陋，其次，你如果想将你想要的东西拿出来就要在口袋里翻来覆去的找，那样的效率是很低的

成果检验

function fn(person) {

    person.age = 19

    person = {

      name: '庆玲',

      age: 19

    }

    return person

  }

  const p1 = {

    name: '凤如',

    age: 18

  }

  const p2 = fn(p1)

  

  console.log(p1); 

  console.log(p2); 

请分析上面的代码中的p1和p2的输出结果

我们创建全局上下文进行编译执行，然后对函数fn进行编译，编译过程中形参和实参要进行统一，接下来，我们要开始执行函数fn了，首先它将p1所指向的对象age修改为了19，然后再函数中它将p1的地址值修改指向为了新对象，并将新对象返回，然后在全局接着执行，将返回的地址值赋给了p2，所以p2的值就是函数中新对象的地址值，接下来输出p1,此时函数已经执行完毕，在调用栈中被销毁了，那我们就在全局中查找，在全局中p1的指向就是#001，但是函数销毁前他将地址值为#001的对象age属性修改为19，所以p1打印出来的只有age改为了19，而p2就是返回的新对象的值，然我们看看结果是不是我们分析的那样

没错，p1的name为'凤如',age为19，p2的name为'庆玲'，age为19

最后来一道添加闭包的内存管理机制代码分析，如果不熟悉闭包的概念，可以先看看这篇文章
](juejin.cn/post/743814…)

function foo() {

    var myname = '彭于晏'

    let test1 = 1

    const test2 = 2

    var innerBar = {

      setName: function (name) {

        myname = name

      },

      getName: function () {

        console.log(test1);

        return myname

      }

    }

    return innerBar

  }

  var bar = foo()

  bar.setName('金城武')

  console.log(bar.getName());

总结

本文探讨了JavaScript的内存机制，包括语言类型（静态与动态、强类型与弱类型）、数据类型及typeof的判断原理，并解析了内存空间的分布，特别是栈空间和堆空间的作用及它们之间的关系。通过示例代码，阐述了原始数据类型和引用数据类型在内存中的存储差异，以及栈为何设计得相对较小的原因。最后，通过实际代码演示和结果分析，检验了对JavaScript内存机制的理解。本文是掌握JavaScript编程能力的关键一步，适合各层次开发者阅读。

写这篇文件，因为一条评论。

我写过识别计算器屏幕的文章，讲了它可以独立部署在App、小程序、树莓派等嵌入式设备上。有个老哥说，这都是应用多年的老技术了。

他说得没错，可能多少年前就有了。不过，实际上，一项技术不管应用了多少年，每年依然还有人花钱去做新的。

不知道八零、九零后是否还记得，零几年时的非智能手机，就已经有了手写识别这个功能。甚至它还给你配一个手写笔。

即便这项技术已经30年了。你现在去软件企业问问，如果他家的产品需要一个手写识别的功能，他是不是依然还得花钱买第三方的服务。

为啥？

这个问题非常好，值得思考。

首先，那时候的技术和现在不一样。在非AI时代，手写识别用的是模板匹配技术，是基于规则的。你写的字，它要拿去库里同模板做比对。就像是机器人客服，靠关键字回复一样。你问“房子”它知道，问“屋子”它说听不懂。而现在的手写识别是基于深度学习的，你问它house，它一样知道是住的地方。

其次，就算技术没变化，它的落地实践也是有壁垒的。这体现在两点。第一，给你一个开源项目，你不一定能用起来。第二，每个人的细分需求不一样，就算你能跑起来，也很难改动，个性化定制。

今天，我就讲解一个开源的OCR项目。以此论证我的观点。

我看到这个项目公布好几个月了，各类新闻也是来了一波又一波：《比xx更好的用OCR》《表格识别神器》《今年最火的十个开源项目》……

大家都在传播、转发，哎呀，这个东西好，好用。包括我做卷帘门的朋友都分享给我，说这个好用。但是，没有谁发一篇文章，说他真的用了，是如何用的，效果怎么样，它的原理是什么，它是如何训练的，它有什么优点，它有什么缺点，缺点是否能优化，该如何优化。今天，我就来填补一下。不然又会有人说，哎呀，这东西早就解决，零成本，多少年前就很成熟了。

这个项目的名字叫surya，是一个OCR识别项目，开源地址是 github.com/VikParuchuri/surya ，目前在github上拥有14K个star。它支持本地化部署，面对年收入低于500万美元的商用，可免费。

我在自己电脑上搭了一套，CPU就可以运行，GPU效率更高。稍微试验了下，给大家展示下功能。

一、功能展示

我拿这张图来进行试验，这是某报纸中的一篇新闻稿件。

它可以检测出图中有哪些类型的结构。比如，段落、图片、标题等。下面的图，就是将检测到的区域标记展示。

另外，区域检测还附赠一个阅读顺序的功能。所谓阅读顺序，就是你读这篇文档时，先读哪里后读哪里。比如按照从左到右，从上到下的顺序。有时候，阅读顺序也很重要，不然容易剧透。

既然是OCR，那么必定要将图像转为文字。想要转换文字，首先得知道哪些区域是文字。这个文本行检测，它也有。

检测到文字的位置，下一步就是识别文字了。下面是识别的结果。

最后，展示一下，它的表格识别。测试图片这样。

做一下表格检测，效果如下。

从识别到的数据信息看，它有4行，3列，12个单元格。

再来进行ocr内容识别。

二、算法集成

上面是它的功能。咱先不谈效果。下面我想问，它为什么能做到这些？回答完这个问题，才能更好地理解它的水平。

作者在最后列举了很多感谢，他说不借助这么多优秀的开源模型，他不可能完成这个项目。比如感谢CRAFT项目，这是一个超3k star的开源文本检测模型。

再比如它还采用了donut，这是一个利用无OCR理解文档的新方法。我们知道，想要理解文档，一般先要知道它上面写了什么，然后对文档进行分析，才能做出判断。而Donut结合多模态直接解析图像，极少处理文字，省去了全文分析的这个步骤。

看上面这张图。你问donut这张图的标题是什么？它可以正确地回答出来。这就是对文档的理解。

因此，从算法层面上，surya是借助了很多顶级的开源模型。而那些模型，也是站在巨人的肩膀上。可以说，它集成的算法是目前公开的一流水平。

我们再来说它的训练数据。他的训练数据，我们可以在 huggingface.co/vikp 上找到。

三、训练数据

比如文本区域类型检测，它的训练数据是这样的：

我们来看它的其中一组数据。image是一张图，bboxes是区域框，labels是区域类型，有文本类型，有表格类型。这些数据，是需要标注的，也就是在图片上画框，标注出区域类型。训练总量是1910张图片。不多。

比如表格的分析检测，它的训练数据是这样的：

image是一张表格图片，bboxes是单元格，rows是每一行的区域，cols是每一列的区域。把这些标记好的数据交给算法，让它学习什么样的特征的是行，什么样的是列。数据相对多一些，9680张图片。所以人家说它的表格识别很强。

对于文本行的检测，它的训练数据是这样的：

训练数据的结构组成：图片，图片中的某个区域，此区域对应的文本类型，另外还附加了一个文本内容。就拿上图选中的那条数据来说。这里面只标记了一条文本行区域。它告诉模型，这张图里面有一个类型为7的文本行，其区域是[88, 96, 865, 134]（左、上、右、下）围成的矩形，请认真学习。

最后到了，OCR识别了。

训练数据的组成还是老一套，图片，区域框，文本内容。主要是告诉模型，我的这张图里面有几个区域，这些区域是什么文本内容，请你仔细学习。另外，这里面还有一个language字段，这表示文字的语言类型。

surya自称支持90多种语言的识别。这不是胡说，因为他的训练数据里，确实有90多种语言的标注。但是，总量太少了。一共4635张图片，如果平均的话，每种语言只有50来张训练数据。

因此，其实surya对于中文的OCR识别效果不是特别好（虽然自称并肩Tesseract）。其主要原因并不是算法不好，而是中文的训练数据太少。英文26个字母，50张纸可以覆盖。但是中文几万字，很难覆盖全。而对于手写识别，surya只能说随缘，因为根本没有训练数据，识别成啥样就是啥样。

这里面训练数据最多的是表格的识别，共9700张样本。训练数据最少的是阅读顺序的检测，才126张。因此，数据量决定了它的识别效果。对于海量的训练数据，就算对强大的商业公司来说也是一个难题。而作者能够凑足这几千张数据，已然很不容易了。

最终，我可以下一个结论。对于surya，它是一流的算法开源项目，是免费的。它对于表格的分析确实很强大。但是，它的训练数据还是太少，而且主要用于识别电子版的文档（清晰、无扭曲），手写识别基本不支持。如果你想要不做改动直接平替收费的OCR，可行性不高。就算是只用表格识别，你也得有稍微专业一些的人，进行从拍照到预处理成电子版的工作。如果收费的效果都不好，你想用免费替换它，可以打消这个念头。算法是开源的，但是训练数据和训练设备的投入，总得有人出。

如果，你想要学习并调整它，或者想自己训练，那么可以接着往下看。

四、源码运行

我不会讲官方ReadMe.md文档上明明白白写着的内容。比如你需要运行pip install streamlit。或者它有这么几个参数，第一个--langs是用于指定OCR的语言。

这样的话，我很像一个复读机。

另外，既然你都想要研究它了，应该不至于按照操作都跑不起来。你去看看它的源码，我只讲关键点。

首先，下载源码。你在源码中可以看到两个文件pyproject.toml和poetry.lock。这说明surya用的是poetry作为项目管理工具。poetry既能管理依赖包，也能管理虚拟环境。

咱们最好找一个Linux环境，再安装poetry。即便你在windows下，现在也可以很简单地安装个ubuntu虚拟机。因为linux实在是可以避免很多问题。

打开liunx命令行，进入到源码根目录。先运行pip install poetry，安装poetry。再运行poetry install安装依赖环境。最后运行poetry shell进入环境，你会看到：

(surya-ocr-py3.12) root@tf:/mnt/d/surya# 

这时运行surya_gui，会启动它的web页面。正常情况下，你会看到如下的输出：

https://huggingface.co/vikp



(surya-ocr-py3.12) root@tf:/mnt/d/surya# surya_gui



  You can now view your Streamlit app in your browser.



  Local URL: http://localhost:8501

  Network URL: http://192.168.1.109:8501



gio: http://localhost:8501: Operation not supported

Loaded detection model /mnt/d/surya/vikp/surya_det3 on device cpu with dtype torch.float32

Loaded recognition model /mnt/d/surya/vikp/surya_rec2 on device cpu with dtype torch.float32

Loaded detection model /mnt/d/surya/vikp/surya_layout3 on device cpu with dtype torch.float32

Loaded reading order model /mnt/d/surya/vikp/surya_order on device cpu with dtype torch.float32

Loaded recognition model /mnt/d/surya/vikp/surya_tablerec on device cpu with dtype torch.float32

访问localhost:8501还有这样的页面：

但实际上，极有可能不正常。因为它在自动下载权重模型访问 huggingface.co 时会访问失败。这时，需要你想办法手动下载模型，然后放到一个固定的位置。

从报错信息能看到说加载不到模型。跟着代码就找到了surya/settings.py。

# Text detection

DETECTOR_MODEL_CHECKPOINT: str = "vikp/surya_det3"

DETECTOR_BENCH_DATASET_NAME: str = "vikp/doclaynet_bench"



# Text recognition

RECOGNITION_MODEL_CHECKPOINT: str = "vikp/surya_rec2"

RECOGNITION_BENCH_DATASET_NAME: str = "vikp/rec_bench"



# Layout

LAYOUT_MODEL_CHECKPOINT: str = "vikp/surya_layout3"

LAYOUT_BENCH_DATASET_NAME: str = "vikp/publaynet_bench"



# Ordering

ORDER_MODEL_CHECKPOINT: str = "vikp/surya_order"

ORDER_BENCH_DATASET_NAME: str = "vikp/order_bench"



# Table Rec

TABLE_REC_MODEL_CHECKPOINT: str = "vikp/surya_tablerec"

TABLE_REC_BENCH_DATASET_NAME: str = "vikp/fintabnet_bench"

……

这里面是它5大功能（检测、识别、类型、排序、表格）的权重模型以及训练数据集的路径配置。正常情况下，会自动下载并缓存读取。但现在我们要自己下载并手动配置。下载方式就是去 huggingface.co/vikp 上找对应的模型文件。

用哪个就下载哪个模型文件，即用什么功能就下载什么功能。其实，对于新手来说，这并不好区分。因为有些功能是相互依赖的。比如表格识别，往往需要先检测出表格区域，才能识别行列区域。实际上会走好几个模型。因此，不熟悉的时候，把MODEL_CHECKPOINT全下载就行了。

DATASET_NAME是数据集，如果你要重新训练，就下载它。不调用训练的代码，不下载也不报错。

你可以把权重文件下载到项目的根目录。然后做如下的配置：

将"vikp/surya_det3"改为os.path.join(BASE_DIR, "vikp/surya_det3")。因上面定义了BASE_DIR是项目根目录，所以这个路径没错。

后面再运行surya_gui就正常了。

访问 localhost:8501 可以上传文件进行5大功能的测试。

它会展示相应的结果。

而在控制台，也会输出操作类型和时间消耗：

Detecting bboxes: 100%|███████| 1/1 [00:02<00:00,  2.61s/it]

Detecting bboxes: 100%|███████| 1/1 [00:02<00:00,  2.06s/it]

Detecting bboxes: 100%|███████| 1/1 [00:02<00:00,  2.44s/it]

Recognizing tables: 100%|███████| 1/1 [00:01<00:00,  1.19s/it]

这样，你就可以研究它的源码了。你可以改一点代码，运行一下，查看变化。具体的功能模块和代码对应，官方readMe.md上有说明。不管是暴露接口能力，还是修改内部函数，或者重新训练自己的数据，都有了着手点。

五、总结

优秀的开源项目就像一个质量很好的毛坯房，相对于商业软件，它往往不具备舒适的居住条件。但是，它的底子很好，结构合理，质量精良。它想发达，需要有人去做一个精装修。但是反过来，有些商业软件去了精装修，很可能就是豆腐渣框架。

为什么说现在是数据为王的时代。从上面的论述可以发现，在一定时空内，算法是公开的，算力投钱就可以，可能就是数据难搞。有好的、大量的数据投喂，才能产生好的AI模型。

一、 背景

页面截图功能在前端开发中，特别是营销场景相关的需求中, 是比较常见的。比如截屏分享，相对于普通的链接分享，截屏分享具有更丰富的展示、更多的信息承载等优势。最近在需求开发中遇到了相关的功能，所以调研了相关的实现和原理。

二、相关技术

前端要实现页面截图的功能，现在比较常见的方式是使用开源的截图npm库，一般使用比较多的npm库有以下两个：

• dom-to-image: github.com/tsayen/dom-…


• html2canvas: github.com/niklasvh/ht…

以上两种常见的npm库，对应着两种常见的实现原理。实现前端截图，一般是使用图形API重新绘制页面生成图片，基本就是SVG（dom-to-image）和Canvas（html2canvas）两种实现方案，两种方案目标相同，即把DOM转为图片，下面我们来分别看看这两类方案。

三、 dom-to-image

dom-to-image库主要使用的是SVG实现方式，简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。

（一）使用方式

首先，我们先来简单了解一下dom-to-image提供的核心api，有如下一些方法：

• toSvg (dom转svg)


• toPng (dom转png)


• toJpeg (dom转jpg)


• toBlob (dom转二进制格式)


• toPixelData (dom转原始像素值)

如需要生成一张png的页面截图，实现代码如下：

import domtoimage from "domtoimage"



const node = document.getElementById('node');

domtoimage.toPng(node,options).then((dataUrl) => {

    const img = new Image();

    img.src = dataUrl;

    document.body.appendChild(img);

})

toPng方法可传入两个参数node和options。

node为要生成截图的dom节点；options为支持的属性配置，具体如下：filter，backgroundColor，width，height，style，quality，imagePlaceholder，cacheBust。

（二）原理分析

dom to image的源码代码不是很多，总共不到千行，下面就拿toPng方法做一下简单的源码解析，分析一下其实现原理，简单流程如下：

整体实现过程用到了几个函数：

• toPng（调用draw，实现canvas=>png ）


• Draw（调用toSvg，实现dom=>canvas）


• toSvg（调用cloneNode和makeSvgDataUri，实现dom=>svg）


• cloneNode（克隆处理dom和css）


• makeSvgDataUri（实现dom=>svg data:url）


• toPng

toPng函数比较简单，通过调用draw方法获取转换后的canvas，利用toDataURL转化为图片并返回。

function toPng(node, options) {

  return draw(node, options || {})

    .then((canvas) => canvas.toDataURL());

}

• draw

draw函数首先调用toSvg方法获得dom转化后的svg，然后将获取的url形式的svg处理成图片，并新建canvas节点，然后借助drawImage()方法将生成的图片放在canvas画布上。

function draw(domNode, options) {

  return toSvg(domNode, options)

  // 拿到的svg是image data URL, 进一步创建svg图片

    .then(util.makeImage)

    .then(util.delay(100))

    .then((image) => {

      // 创建canvas，在画布上绘制图像并返回

      const canvas = newCanvas(domNode);

      canvas.getContext("2d").drawImage(image, 0, 0);

      return canvas;

    });

  // 新建canvas节点，设置一些样式的options参数

  function newCanvas(domNode) {

    const canvas = document.createElement("canvas");

    canvas.width = options.width || util.width(domNode);

    canvas.height = options.height || util.height(domNode);

    if (options.bgcolor) {

      const ctx = canvas.getContext("2d");

      ctx.fillStyle = options.bgcolor;

      ctx.fillRect(0, 0, canvas.width, canvas.height);

    }

    return canvas;

  }

}

• toSvg


• toSvg函数实现从dom到svg的处理，大概步骤如下：


• 递归去克隆dom节点（调用cloneNode函数）


• 处理字体，获取所有样式，找到所有的@font-face和内联资源，解析并下载对应的资源，将资源转为dataUrl给src使用。把上面处理完的css rules放入中，并把标签加入到clone的节点中去。
  
• 处理图片，将img标签的src的url和css中backbround中的url，转为dataUrl使用。


• 获取dom节点转化的dataUrl数据（调用makeSvgDataUri函数）

function toSvg(node, options) {

  options = options || {};

  // 处理imagePlaceholder、cacheBust值

  copyOptions(options);

  return Promise.resolve(node)

    .then((node) =>

      // 递归克隆dom节点

      cloneNode(node, options.filter, true))

  // 把字体相关的csstext放入style

    .then(embedFonts)

  // clone处理图片，将图片链接转换为dataUrl

    .then(inlineImages)

  // 添加options里的style放入style

    .then(applyOptions)

    .then((clone) =>

      // node节点转化成svg

      makeSvgDataUri(clone,

        options.width || util.width(node),

        options.height || util.height(node)));

  // 处理一些options的样式

  function applyOptions(clone) {

    ...

    return clone;

  }

}

• cloneNode

cloneNode函数主要处理dom节点，内容比较多，简单总结实现如下：

• 递归clone原始的dom节点，其中, 其中如果有canvas将转为image对象。


• 处理节点的样式，通过getComputedStyle方法获取节点元素的所有CSS属性的值，并将这些样式属性插入新建的style标签上面, 同时要处理“:before，:after”这些伪元素的样式, 最后处理输入内容和svg。

function cloneNode(node, filter, root) {

  if (!root && filter && !filter(node)) return Promise.resolve();

  return Promise.resolve(node)

    .then(makeNodeCopy)

    .then((clone) => cloneChildren(node, clone, filter))

    .then((clone) => processClone(node, clone));

  function makeNodeCopy(node) {

  // 将canvas转为image对象

    if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());

    return node.cloneNode(false);

  }

  // 递归clone子节点

  function cloneChildren(original, clone, filter) {

    const children = original.childNodes;

    if (children.length === 0) return Promise.resolve(clone);

    return cloneChildrenInOrder(clone, util.asArray(children), filter)

      .then(() => clone);

    function cloneChildrenInOrder(parent, children, filter) {

      let done = Promise.resolve();

      children.forEach((child) => {

        done = done

          .then(() => cloneNode(child, filter))

          .then((childClone) => {

            if (childClone) parent.appendChild(childClone);

          });

      });

      return done;

    }

  }

  function processClone(original, clone) {

    if (!(clone instanceof Element)) return clone;

    return Promise.resolve()

      .then(cloneStyle)

      .then(clonePseudoElements)

      .then(copyUserInput)

      .then(fixSvg)

      .then(() => clone);

    // 克隆节点上的样式。

    function cloneStyle() {

       ...

    }

    // 提取伪类样式，放到css

    function clonePseudoElements() {

       ...

    }

    // 处理Input、TextArea标签

    function copyUserInput() {

       ...

    }

    // 处理svg

    function fixSvg() {

       ...

    }

  }

}

• makeSvgDataUri

首先，我们需要了解两个特性：

• SVG有一个元素，这个元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助标签，我们可以直接在SVG内部嵌入XHTML元素，举个例子：

<svg xmlns="http://www.w3.org/2000/svg">

<foreignObject width="120" height="50">

<body xmlns="http://www.w3.org/1999/xhtml">

<p>文字。</p>

</body>

</foreignObject>

</svg>

可以看到标签里面有一个设置了xmlns=“http://www.w3.org/1999/xhtml”…标签，此时标签及其子标签都会按照XHTML标准渲染，实现了SVG和XHTML的混合使用。

• XMLSerializer对象能够把一个XML文档或Node对象转化或“序列化”为未解析的XML标记的一个字符串。

基于以上特性，我们再来看一下makeSvgDataUri函数，该方法实现node节点转化为svg，就用到刚刚提到的两个重要特性。

首先将dom节点通过

XMLSerializer().serializeToString() 序列化为字符串，然后在

标签 中嵌入转换好的字符串，foreignObject 能够在 svg

内部嵌入XHTML，再将svg处理为dataUrl数据返回，具体实现如下：

function makeSvgDataUri(node, width, height) {

  return Promise.resolve(node)

    .then((node) => {

      // 将dom转换为字符串

      node.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");

      return new XMLSerializer().serializeToString(node);

    })

    .then(util.escapeXhtml)

    .then((xhtml) => `<foreignObject x="0" y="0" width="100%" height="100%">${xhtml}</foreignObject>`)

  // 转化为svg

    .then((foreignObject) =>

    // 不指定xmlns命名空间是不会渲染的

      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${

        foreignObject}</svg>`)

  // 转化为data:url

    .then((svg) => `data:image/svg+xml;charset=utf-8,${svg}`);

}

四、 html2canvas

html2canvas库主要使用的是Canvas实现方式，主要过程是手动将dom重新绘制成canvas，因此，它只能正确渲染可以理解的属性，有许多CSS属性无法正确渲染。

支持的CSS属性的完整列表：

html2canvas.hertzen.com/features/

浏览器兼容性：

Firefox 3.5+ Google Chrome Opera 12+ IE9+ Edge Safari 6+

官方文档地址：

html2canvas.hertzen.com/documentati…

（一）使用方式

// dom即是需要绘制的节点, option为一些可配置的选项

import html2canvas from 'html2canvas'

  html2canvas(dom, option).then(canvas=>{

  canvas.toDataURL()

})

常用的option配置：

全部配置文档：

html2canvas.hertzen.com/configurati…

（二）原理分析

html2canvas的内部实现相对dom-to-image来说要复杂一些, 基本原理是读取DOM元素的信息，基于这些信息去构建截图，并呈现在canvas画布中。

其中重点就在于将dom重新绘制成canvas的过程，该过程整体的思路是：遍历目标节点和目标节点的子节点，遍历过程中记录所有节点的结构、内容和样式，然后计算节点本身的层级关系，最后根据不同的优先级绘制到canvas画布中。

由于html2canvas的源码量比较大，可能无法像dom-to-image一样详细的分析，但还是可以大致了解一下整体的流程，首先可以看一下源码中src文件夹中的代码结构，如下图：

简单解析一下：

• index：入口文件，将dom节点渲染到一个canvas中，并返回。


• core：工具函数的封装，包括对缓存的处理函数、Context方法封装、日志模块等。


• css：对节点样式的处理，解析各种css属性和特性，进行处理。


• dom：遍历dom节点的方法，以及对各种类型dom的处理。


• render：基于clone的节点生成canvas的处理方法。

基于以上这些核心文件，我们来简单了解一下html2canvas的解析过程, 大致的流程如下:

• 构建配置项

在这一步会结合传入的options和一些defaultOptions，生成用于渲染的配置数据renderOptions。在过程中会对配置项进行分类，比如resourceOptions（资源跨域相关）、contextOptions（缓存、日志相关）、windowOptions（窗口宽高、滚动配置）、cloneOptions（对指定dom的配置）、renderOptions（render结果的相关配置，包括生成图片的各种属性）等，然后分别将各类配置项传到下接下来的步骤中。

• clone目标节点并获取样式和内容

在这一步中，会将目标节点到指定的dom解析方法中，这个过程会clone目标节点和其子节点，获取到节点的内容信息和样式信息，其中clone dom的解析方法也是比较复杂的，这里不做详细展开。获取到目标节点后，需要把克隆出来的目标节点的dom装载到一个iframe里，进行一次渲染，然后就可以获取到经过浏览器视图真实呈现的节点样式。

• 解析目标节点

目标节点的样式和内容都获取到了之后，就需要把它所承载的数据信息转化为Canvas可以使用的数据类型。在对目标节点的解析方法中，递归整个DOM树，并取得每一层节点的数据，对于每一个节点而言需要绘制的部分包括边框、背景、阴影、内容，而对于内容就包含图片、文字、视频等。在整个解析过程中，对目标节点的所有属性进行解析构造，转化成为指定的数据格式，基础数据格式可见以下代码:

class ElementContainer {

  // 所有节点上的样式经过转换计算之后的信息

  readonly styles: CSSParsedDeclaration;

  // 节点的文本节点信息, 包括文本内容和其他属性

  readonly textNodes: TextContainer[] = [];

  // 当前节点的子节点

  readonly elements: ElementContainer[] = [];

  // 当前节点的位置信息（宽/高、横/纵坐标）

  bounds: Bounds;

  flags = 0;

  ...

}

具体到不同类型的元素如图片、IFrame、SVG、input等还会extends ElementContainer拥有自己的特定数据结构，在此不详细贴出。

• 构建内部渲染器

把目标节点处理成特定的数据结构之后，就需要结合Canvas调用渲染方法了，Canvas绘图需要根据样式计算哪些元素应该绘制在上层，哪些在下层，那么这个规则是什么样的呢？这里就涉及到CSS布局相关的一些知识。

默认情况下，CSS是流式布局的，元素与元素之间不会重叠。不过有些情况下，这种流式布局会被打破，比如使用了浮动(float)和定位(position)。因此需要需要识别出哪些脱离了正常文档流的元素，并记住它们的层叠信息，以便正确地渲染它们。

那些脱离正常文档流的元素会形成一个层叠上下文。元素在浏览器中渲染时，根据W3C的标准，所有的节点层级布局，需要遵循层叠上下文和层叠顺序的规则，具体规则如下：

在了解了元素的渲染需要遵循这个标准后，Canvas绘制节点的时候，需要生成指定的层叠数据，就需要先计算出整个目标节点里子节点渲染时所展现的不同层级，构造出所有节点对应的层叠上下文在内部所表现出来的数据结构，具体数据结构如下:

// 当前元素

element: ElementPaint;

// z-index为负, 形成层叠上下文

negativeZIndex: StackingContext[];

// z-index为0、auto、transform或opacity, 形成层叠上下文

zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];

// 定位和z-index形成的层叠上下文

positiveZIndex: StackingContext[];

// 没有定位和float形成的层叠上下文

nonPositionedFloats: StackingContext[];

// 没有定位和内联形成的层叠上下文

nonPositionedInlineLevel: StackingContext[];

// 内联节点

inlineLevel: ElementPaint[];

// 不是内联的节点

nonInlineLevel: ElementPaint[];

基于以上数据结构，将元素子节点分类，添加到指定的数组中，解析层叠信息的方式和解析节点信息的方式类似，都是递归整棵树，收集树的每一层的信息，形成一颗包含层叠信息的层叠树。

• 绘制数据

基于上面两步构造出的数据，就可以开始调用内部的绘制方法，进行数据处理和绘制了。使用节点的层叠数据，依据浏览器渲染层叠数据的规则，将DOM元素一层一层渲染到canvas中，其中核心具体源码如下：

async renderStackContent(stack: StackingContext): Promise<void> {

  if (contains(stack.element.container.flags, FLAGS.DEBUG_RENDER)) {

  debugger;

  }

  // 1. the background and borders of the element forming the stacking context.

  await this.renderNodeBackgroundAndBorders(stack.element);

  // 2. the child stacking contexts with negative stack levels (most negative first).

  for (const child of stack.negativeZIndex) {

  await this.renderStack(child);

  }

  // 3. For all its in-flow, non-positioned, block-level descendants in tree order:

  await this.renderNodeContent(stack.element);

  for (const child of stack.nonInlineLevel) {

  await this.renderNode(child);

  }

  // 4. All non-positioned floating descendants, in tree order. For each one of these,

  // treat the element as if it created a new stacking context, but any positioned descendants and descendants

  // which actually create a new stacking context should be considered part of the parent stacking context,

  // not this new one.

  for (const child of stack.nonPositionedFloats) {

  await this.renderStack(child);

  }

  // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  for (const child of stack.nonPositionedInlineLevel) {

  await this.renderStack(child);

  }

  for (const child of stack.inlineLevel) {

  await this.renderNode(child);

  }

  // 6. All positioned, opacity or transform descendants, in tree order that fall int0 the following categories:

  // All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

  // For those with 'z-index: auto', treat the element as if it created a new stacking context,

  // but any positioned descendants and descendants which actually create a new stacking context should be

  // considered part of the parent stacking context, not this new one. For those with 'z-index: 0',

  // treat the stacking context generated atomically.

  //

  // All opacity descendants with opacity less than 1

  //

  // All transform descendants with transform other than none

  for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {

  await this.renderStack(child);

  }

  // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index

  // order (smallest first) then tree order.

  for (const child of stack.positiveZIndex) {

  await this.renderStack(child);

  }

}

在renderStackContent方法中，首先对元素本身调用renderNodeContent和renderNodeBackgroundAndBorders进行渲染处理。

然后处理各个分类的子元素，如果子元素形成了层叠上下文，就调用renderStack方法，这个方法内部继续调用了renderStackContent，这就形成了对于层叠上下文整个树的递归。

如果子元素是正常元素没有形成层叠上下文，就直接调用renderNode，renderNode包括两部分内容，渲染节点内容和渲染节点边框背景色。

async renderNode(paint: ElementPaint): Promise<void> {

  if (paint.container.styles.isVisible()) {

    // 渲染节点的边框和背景色

    await this.renderNodeBackgroundAndBorders(paint);

    // 渲染节点内容

    await this.renderNodeContent(paint);

  }

}

其中renderNodeContent方法是渲染一个元素节点里面的内容，其可能是正常元素、文字、图片、SVG、Canvas、input、iframe，对于不同的内容也会有不同的处理。

以上过程，就是html2canvas的整体内部流程，在了解了大致原理之后，我们再来看一个更为详细的源码流程图，对上述流程进行一个简单的总结。

五、 常见问题总结

在使用html2canvas的过程中，会有一些常见的问题和坑，总结如下:

（一）截图不全

要解决这个问题，只需要在截图之前将页面滚动到顶部即可：

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

（二）图片跨域

插件在请求图片的时候会有图片跨域的情况，这是因为，如果使用跨域的资源画到canvas中，并且资源没有使用CORS去请求，canvas会被认为是被污染了，canvas可以正常展示，但是没办法使用toDataURL()或者toBlob()导出数据，详情可参考：developer.mozilla.org/en-US/docs/…

解决方案：在img标签上设置crossorigin，属性值为anonymous，可以开启CROS请求。当然，这种方式的前提还是服务端的响应头Access-Control-Allow-Origin已经被设置过允许跨域。如果图片本身服务端不支持跨域，可以使用canvas统一转成base64格式，方法如下。

function getUrlBase64_pro( len,url ) {

  //图片转成base64

  var canvas = document.createElement("canvas"); //创建canvas DOM元素

  var ctx = canvas.getContext("2d");

  return new Promise((reslove, reject) => {

  var img = new Image();

  img.crossOrigin = "Anonymous";

  img.onload = function() {

  canvas.height = len;

  canvas.width = len;

  ctx.drawImage(img, 0, 0, len, len);

  var dataURL = canvas.toDataURL("image/");

  canvas = null;

  reslove(dataURL);

  };

  img.onerror = function(err){

  reject(err)

  }

  img.src = url;

  });

}

（三）截图与当前页面有区别

方式一：如果要从渲染中排除某些elements，可以向这些元素添加data-html2canvas-ignore属性，html2cnavas会将它们从渲染中排除，例如，如果不想截图iframe的部分，可以如下：

html2canvas(ele,{

useCORS: true,

ignoreElements: (element: any) => {

  if (element.tagName.toLowerCase() === 'iframe') {

  return element;

  }

  return false;

  },

})

方式二：可以将需要转化成图片的部分放在一个节点内，再把整个节点，透明度设置为0， 其他部分层级设置高一些，即可实现截图指定区域。

六、 小结

本文针对前端截图实现的方式，对两个开源库dom-to-image和html2canvas的使用和原理进行了简单的使用方式、实现原理方面，进行介绍和分析。

参考资料：

1.dom-to-image原理

2.html2image原理简述

3.浏览器端网页截图方案详解

4.html2canvas

5.html2canvas实现浏览器截图的原理（包含源码分析的通用方法）