前端js实现截图功能
大家好，今天我们来使用 javascript 截取视频封面，先看一下效果，我先点击选择一个视频文件看视频，就在这里显示了点击播放，我们随机选一帧，点击截取封面，截取的封面就显示了，我们再试试其他时间点 更新了，是吧？我们来看下代码， 一个 video 标签用于显示视频，然后是一个 im 显示封面图，一个 import 的选择文件，最后是一个截取封面的按钮，来看一下我们的 j s， 这里获取到视频 video 选择文件 import 和图片 m 节点定义两个变量，存放视频的原始宽高。 然后我们看一下选择文件的代码，给 input 绑定一个事件 change， 这里是获取 file， 我们也可以通过 file 获取到视频的大小和文件类型，获取到类型和大小可以对上传时做一些限制。 然后调用 url create object url 方法转换为一个 url， 复制给 video as rc。 好，我们来看一下视频的地址， 打开一下控制台， 这就是我们通过 url create object url 转换的 url。 回到代码 这里定一个 camplay 事件，获取视频的实际宽高， 把获取到的宽高负值给我们之前定义的变量。 现在来看一下我们截取封面的逻辑， get the grand time 就是我们点击截取封面触发的方法。先创建一个 v 六，设置一下视频的宽高，也就是我们上面保存的 注意一下，这里我们设置一下允许跨域，因为我们在编辑的时候可能是个跨域的弱地址，然而， 然后就是设置这个 video 的 current time， 等于上面视频的播放位置。之前视频的 current time， 这里是给我们创建的这个 video 绑定一个 lodated 的事件， 加载完成后，创建一个 campus， 设置 cameras 的宽高，接着把创建的 video 画到 cameras 上，显示的图像就是我们当前截取的这帧， 返回一个包含图片展示的 data uri， 图片格式是 j p g， 图片质量零点八，最后给图片添加 s r c， 这就完成了我们整个上传视频预览，并且根据指定真截图的功能，我们再来看看效果。
粉丝6444获赞3.9万
相关视频
01:07查看AI文稿AI文稿有时候我们可能会对网页有各种截图的需求，比如我想把这整个很长的页面完整的截图下来，该怎么办呢？其实谷歌浏览器自带的截图功能就非常好用，只要我们打开开发者工具，然后打开它的命令行面板， 接着输入 screenshot， 你就会发现有四个相关的命令，其中这个 four side screenshot 就是能把整个页面完整截图的功能，我们点击一下，稍等一会看，整个页面就被截取成了一张很长的图片，保存到了我们本地文件夹。那还有其他三个功能分别是什么呢？ 那点击这个 area screenshot， 就有点像我们常见的截图工具一样，会出现一个十字，可以让我们自由选择页面中的截图区域。那这个 no 的 screenshot 呢？就是可以把你选中的页面元素截取下来，这个选中是要通过 这个选择页面元素工具，或者直接在 alimands 面板中选中某个元素之后，然后你再用这个 nose screenshot， 那么这个元素就会被完整精确的截取下来。最后一个就非常简单了，就是截取当前页面显示区域的范围。
284好奇代码的三木
03:12查看AI文稿AI文稿不是组件用不起，而是原声 gs 更有挑战性。给他一个 waterfor 盒子，他能加上相对定位，并把其宽设置为浏览器窗口的百分之八十，外编辑为五十像素并居中。 若是再给他一个出手的机会，他能把一张大图片狠狠的塞入名为 waterford 小盒子里，并给图片设置为绝对定位宽为二百二十像素，圆角设置为十像素，并加上零点三秒的过渡效果。 结构和样式搭建好后，他向 gs 模块伸出了咸猪手。他先获取 waterfor 盒子，设置变量为图片宽度，但是他还不满足，他甚至还要写了一个创建图片的函数，并且丧心病狂的利用福尔循 加载三十张图片，并把其狠狠地塞入 waterfow 盒子。接下来到了布局环节。对于布局问题，五星上将迈克阿瑟评论道， 如果上帝让我用 gs 实现瀑布流布局，那么我会定义一个数组，数组的长度即为图片的列数，通过找出数组的最小值来决定把图片放入哪一列。 此话一出便震惊四座，诸多网友纷纷对其进行称赞，于是便创建一个函数，用于获取图片的列数和列与列之间的缝隙。他默不作声地创建一个数组奈斯套，用于存放列的高度，并出始化为零。 在编写了一个用于获取 next top 最小值和缩影号，表示当前在第几列的函数， 但他仍不满足。他通过 four 循环来设置图片的位置，其中的 left 值相当于 x 坐标 meantop index 表示 d 系列从零开始。 i m g v 加 in forget 表示水平、方向、图片宽度，加上图片间的缝隙， top 值相当于外坐标 meantop mean 表示列高度最小。 info gap 二垂直方向图片间隙。最后再更新一下列的最小值，同时再求一下数组最大值，把 waterfor 盒子高度更新。 最后我们再把 lao 函数运行一下，惊喜的发现图片竟然重叠在一起，根本不行，你敢耍老子？其实这是因为函数 lao 调用时，图 片还没加载，即还没出现在页面上，需要获取图片的高，而获取不了，导致获取值为零，从而发生图片叠加。解决方法就是添加一个 window 等待时间，等待图片加载完后再执行， 此时就大功告成了。另外还可以加上监听窗口变换，实现让窗口大小变化时能重新布局。
4433*
00:29查看AI文稿AI文稿大部分的网页都特别长，今天教你十五秒把整个网页截图下来，找到自己想截图的网页，按下 f 十二键，呼出浏览器调试台，再按住 ctrl 加 shift 加 p 组合键，呼出功能框，在弹出的框框里面输入 c a p 选， 选择第二个选项，敲击回车键，浏览器就自动截图出来啦！这种截图方法因为是渲染引擎，直接输出会比普通的插件速度更快，分辨率也更高，学会了吗？别忘记点关注呦！如果你有不明白的地方，也可以私信问我。
5.1万木马本人-前端
07:06查看AI文稿AI文稿这是美团的购物页面，我们如何来实现这么一个购物车的效果呢？当然你不要仅关注这个动画的实现啊，整个的页面逻辑该如何来实现呢？ 他有很多的数据，而且这些数据之间呢还有很多的关联，这里有配送费总价，商品的选择数量，这些选择数量跟这些数据也是关联的。然后呢，还有起送标准，达到三十元就起送，否则的话是不会出现结账界面的，你看这里还会计算还差多少元。 我们在平时开发的时候啊，有可能会出现一种感觉，就是拿到一个效果，不知道该如何下手，信息量太大了，我到底先做哪一块呢？好像总是顾此失彼，那么面相对象就给我们提供了一个非常好的思维，他告诉我们一个程序该从什么样的角度去入手进行开发。 那么到底怎么开发呢？你就找一找整个效果里边有哪些对象，我们可以分为哪几类。虽然这个界面看上去信息很大，但是 你一旦用对象分类，他的信息一下就变少了，就两个东西，一个东西是商品，一个东西呢是购物车，购物车里边包含很多商品，所以很快的我们就可以写出这么一个类结构。有一个商品类，它里面有各种各样的属性和方法。有一个购物车的类，它里边也有各种属性和方法。 你看第一步先找类，就给你指明了一个开发的方向了。好，找到类之后，接下来他告诉你，你要去找每一个类的属性和方法， 开发就能下手了呀。就对初学者而言，面相对象最大的作用就在于此，能下手干活了不是头脑一片空白， 我们来分析一下商品有哪些属性呢？那你可能会有分析出来有很多，对吧？比如商品的标题，商品的描述，商品的月销量，以及他的好评率，商品的单价。我这里呢就简单的记录一下啊，有商品的标题，商品的单价，商品选中了几个 啊，那么他就对应到这里好。写了属性之后呢，我们可以接着写构造函数，你把这些信息呢给我传递过来，我就可以帮你创建好一个商品对象。对于某一些属性呢，你还可以给他赋予默认值，对吧？利用 es 六的参数默认值。 有人说这个玩意是不是可以不写啊？是可以不写，只是你在初学面相对象的时候啊，我还是建议你写上，写上之后呢，比较容易阅读啊，你可以一目了然的看到这个商品里边有各种各样的属性。那有的人说我将来呢，可能会动态的给他加一些属性，比方说你去溜了一个 goods， 然后将来呢，给他加了一些乱七八糟的属性。尽管呢，既然是允许你这么干，但是我不建议你这么干， 因为你在使用面相对象。在面相对象的世界里边，属性是不能新增和删除的，你可以改动他的属性值是没问题，但是呢，你不能去新增和删除属性。为啥呀？他不符合逻辑。一个苹果颜色是他的属性，他的颜色可能变化，昨天是青苹果，放了一天，放熟了，变成红苹果了，颜色可以变化没问题，但是 不能第二天颜色消失了，他没这个颜色这个属性了，这叫啥事啊？所以呢，在面相对象的世界里边不会去新增和删除属性的啊，你这么干了，你脑袋里边肯定就不是面相对象了。因此呢，我们可以把他所有的属性呢罗列在此，便于观察好。那么这个商品有没有什么方法呢？我们可能会需要计算这个单件商品的总价，对吧？单价乘以数量， 那么我们可以写个方法啊，叫做 get price， 得到的结果呢，就是选中的数量乘以这个价格。这里呢，可能会有些疑问，说，为什么要写成一个方法呢？为什么不把总价作为一个属性？为什么呢？ 因为这样子做的话就会产生数据。种鱼啥意思啊？因为这个数据是来自于他，乘以他，对吧？也就是说，我只要记住这两个属性，就已经暗含了总价了，但是你又单独的去搞了一个总价的属性出来，就有可能会造成这三者数据不一致。比方说 price 的值呢是一，确实 number 呢是三，但是呢，你这里不知道怎么 给他复制的。五，是不是给了他这么一个漏洞，就导致了这块数据跟这两个东西看上去不一致，对吧？这个数据看上去就像多出来的一样，有了数据勇于你就要必须要考虑数据的一致性，他跟他的数据是不是一致的，这会增加我们的心智负担。所以呢，我不建议同学们， 特别是在初学变相对象的时候去这么去干啊。将来呢，可能会因为某些原因，故意的选择数据溶于，那是将来的事，因此呢，我们把它写成方法，他就不会出现溶于了，你只要一钓这个方法，他会基于这两个数据来进行计算。那么除此之外呢，我们可能还会需要一些别的方法，比方说这个商品目前有没有被用户选择，为什么要记录这个呢？是因为用户选不选他 的界面是不一样的，我们需要这样的一个数据，因此呢，我们还会去写出一些别的方法，比方说像 is choose 这个商品是否有被用户选择，那么在这里呢，我们可以通过这个 choose number 数量是否大于零，就可以非常轻松的来得到。之所以不把它做成一个属性， 原因还是一样的，避免数据用于好。那么同样的道理呢，我们还会去增加一些别的方法，比方说像商品的数量的减少和商品数量的增加，那么都很简单啊，就是就是 number 加加和就是 number 减减。有些同学可能会觉得莫名其妙，你为什么要这样干呢？你明明可以通过一个对象 啊，再传一些参数，然后呢，在对象里边通过这个属性去加加减减就完事了呀，你这么干起什么作用呢？两个作用，第一个作用呢是羽翼更好，这个羽翼他表达的感觉就不如这个 decrease 商品数量减少这么简洁，容易阅读。当然这不是最重要的原因，最重要的原因是因为 我们将来呢，可能会在商品减少或增加的时候加入一些别的逻辑，比方说商品减少的时候，我要判断一下他的选择数量是不是大于零的，大于零才减少，不等于零，那就不能减少了，不然的话就是负数了。如果说我们把它封装成方法的话，那么这样子呢， 我们只需要去改动这个方法，内部由于这个方法的参数和返回时没有任何变化，因此呢，在外部的代码不需要做任何更改，这就是封装的好处，懂这意思吧？你看边写边聊就差不多把这个商品的内这个逻辑啊，基本上都写出来了，他就不会出现我们看到一个效果完全无法下手的情况了。 那么同理呢，我们去可以完成购物车，可以去记录购物车里边有哪些属性，比方说有一些商品的数组，他里边要记录很多的商品，每个商品呢就是一个固执的实力， 也可以呢，去记录一下起送的费用，起送门槛，也可以记录一下快递费，这些属性呢，我们都可以记录。同样的，我们可以写一些方法来计算整个购物车的总价， 那么自然而然就是这些所有商品的总价之和，再加上一个起送费，你可以在这里轻松的去使用各种方式来实现，来个 reduce， 所以很轻松就实现了。当然我们也可以去做更多的信息记录，像什么 目前有没有达到其中标准啊？几个函数对吧？返回个 boar 以及呢目前总共的选择数量，这里是不是用一个累计就可以了？总之啊，我要通过这个例子告诉同学们的是，有了面相对象那个思维过后，我们就有了一个强大的武器， 将来呢，拿到任何一个效果，我们都可以用类似的方式去分析程序，然后作为一个切入点来完成整个程序结构的编写。 当然现在距离我们实现整个效果呢，还有一些距离，如果说你想要听袁老师用面相对象讲解完整的购物页面，那么就一定要来听我们的大师课，大师课免费的来领取就完事了。这个效果其实就是大师课里边其中一节课，我用一个多小时的时间带着大家从零开始，把整个页面的逻辑全部实现， 你就不会告诉你每一句代码是怎么来的，我为什么要这样子写，有没有别的做法，哪个更好，哪个更合适，而且做完这个效果不是说你以后就只能做一个购物车，你只要理解透彻了，你可以实现任何 和想要的效果都是一样的思路。当然大师课里边的东西还远远不止于此，我们有实现效果，同时有讲解，比面试题有讲解前端最重要的核心原理，还有无忧的原码剖析。所以 大师课虽然有些难度，但是你只要一周把看完，可以说你的开发能力会获得质的提升，他是真正能够让你跨越等级的这么一个课程，而且还是免费的。所以还没有领取到的同学啊，可以进咱们评论区第一条，然后加入我们的粉丝群，根据提示领取就完事了。
4421渡一前端公开大师课
01:50查看AI文稿AI文稿你还在到处找录屏软件吗？我来教你用几行简单的代码写一个。我们先在页面上放开始录屏和停止录屏两个按钮， 接下来给开始录屏按钮添加 click 事件。事件中，我们使用 navigator 点 media devices 点 get display media 方法来获取当前屏幕。这个方法会给我们返回一个视频流。 有了视频流之后，我们就可以使用 media recorder 来录制这个视频流了。在 on data available 事件中，我们需要把录制到的视频数据存起来，所以这里我们需要定义一个 data 变量用来存视频数据。 接下来我们在 onstop 方法里面把录制好的视频下载下来。在停止录制的时候，我们同时需要关闭录制窗口，所以我们调用 string 点 get tracks 方法来获取录制窗口，并 定调用 stop 方法来停止它。接下来我们把视频数据转换成 love 对象，并创建一个链接来下载它。我们使用 url 点 create upject url 来创建一个视频链接，并用当前时间作为下载文件名。 吊用链接的 click 方法可以触发下载。最后一定要用 u r l 点 revoke object u r l 方法释放占用的资源。最后调用 recorder 点 start 方法开始录制。 接下来我们来实现停止录屏。首先我们在停止录屏按钮上绑定一个 click 事件。 要实现停止录屏，我们需要调用 recode 变量的 stop 方法，所以我们需要把这个变量移到外面来，这样就能在停止录屏事件中调用它了。我们来运行试一下，点击开始录屏，然后选 则整个屏幕。录制好之后，点击停止录屏，录好的视频就被下载下来了。怎么样？是不是很简单？赶快试试吧！
4575叨叨魏
06:31查看AI文稿AI文稿搬砖啦，今天来共享一下 gs 相关的知识点，第一大 大块 gs 文件的创建，第二大块是 gs 的引入方式，这一块其实在咱们讲到 h 前面四 s 的时候，也似曾相识的见到过，是不是？好，只不过方式不太一啊，等一下我们来详细说一下。 在讲这一块内容之前，我们先来扩展一个知识点，就是前端的三大块，人家问你别不知道对吧？哎，实际前端三大块我们已经学完了两大块， htm 和四 s html， 它主要是 学到的标签对吧？各种各样的标签，它的作用就是用来去承载我们所需要展示给用户的一些内容，但是这些内容承载完之后，他会按照他自己的格式，对不对啊？从上往下去展示，但是 有些时候我们需要让他这个并排呀，或者是按照我们自己的一个方式让他去展示给用户去看，这时候我们就需要通过 css 去进行外观的一个修饰，对吧？ 那还有一点就是 gs， 比如说像我们在看到的轮播图，动态的，还有数据的提交啊，搜索功能啊等等，这些我们需要结合 gs 来实现啊，也就是前端三大块你学完之后，基本的咱们页面就可以写起来了啊。好，我们先来看第一大块 gs 文件的创建， 创建这一块呢，我们先来给他找一个位置，写上一个戒色圆码 啊，有需要的小伙伴后续也可以把这一块发给你啊。打开咱们自己的 vs 扣的，把这个 gs 文件托放进来，托放进 进来之后，在这个文件夹里面呢，我们就需要去创建三大块，对吧？浅断的三大块必不可少的，对不对？好，第一大块是我们需要去创建一个 htm 页面两种方式，第一种是你在这个地方直接去通过文本文档去创建，这个方式咱们讲过，对不对？好， 比如说我们来给他一个 ex 后缀名，一定要去，记得去改一下，这样我们就创建好了，这是第一种方式。第二种方式比较简单，就是直接在咱们 vs 扣的里面去创建，这是创建文件对不对？好，我们来去创建一个 ex 零一点 h 前面 啊，两种方式都给大家去讲到了啊，你用哪一种方式都可以？好， h 前面创建好之后，是不是我们还需要去创建一个 css 文件？同样呢，也有两种方式， 跟刚才的一样，你在这里呢，可以直接去这样去创建，也可以。怎么样去创建啊？ vs 扣的里面去创建，哎，建议大家啊，椰丝扣的里面去创建，好吧， 这样比较方便一些啊，那 vsk 的里面是不是我们要创建在这个文件夹里面？来给他一个 css 文件夹，对不对？好，创建好之后是不是我们也需要有一个 css 文件呀？文件 之前给大家去说过，对吧？名字最好跟你当前创建的这个文件相一致就好了。这个咱先去掉吧，不然太多看着容易太乱啊， 这块很清晰明了了，对不对？那来看一下，我们有了 h 前面页面和 cs 这块，咱们之前讲过的，对不对？ h 前面页面里面我们需要那 头文件怎么样？来办？快捷键吗？对吧？哎， shift 感叹号松开之后，然后按听不见，哎，这一块咱们就 ok 了，写好了是吧？好，写好了之后我们还需要把 cs 引入进来，这个引入跟咱们之前课堂里面讲到的引入是一模一样的， 直接另可四颜色就可以了，对不对？好，这个地方注意一下啊，很多小伙伴都说，哎，老师，我找不到他，对吧？你找的时候一定要看一下他跟他的一个等级关系，有小伙伴为什么找不到呢？是不是这里直接给他来一个 atm， 你把这个文件给他拖进来， 他跟他是同等级，对吧？你这样直接去找四 s 下面的四 s 文件，能不能 找到？找不到，对吧？这个是路径问题啊，好多小伙伴问过， 所以 h 前面你可以不用给他存放在文件夹里面，直接放在跟目录就可以了，能明白吗？跟 动作的时候他跟他同等级，对吧？同等级我们可以去找，也就是啊，哎，直接去找到 cs 的文件夹，对不对？他下面的哪一个文件啊？这个文件明白了吗？这是一个录件地址的一个问题啊。 这一块 ok 了之后我们来看一下 gs 引入的关系，有两种啊，第一种他也有一个自身的一个标签，就是 suv 的标签， 这个里面就是后续我们要写的一些 gs 代码，这是第一种引入方式， 但是这种方式呢，你了解一下就好啊，这个也有时候会用到，但是我们用的比较多的是第二种引入方式，这个引入方式是什么呢？他呢是通过 s plus src， 这个里面跟的就是我们所需要的一个 gs 文件，这个 gs 文件跟我们刚才说到的四 s 文件一样，你呢？最好把它放在文件夹里面， 紧接着在文件夹里面创建一个跟他名字相一致的英 x 零一点 js， 这能明白吗？ 看一下，都把它放开看一下啊。你看这个文件，比如说我这个文件里面，我需要更改一下他的 cs 外观，是不是通过名字可以直接找的到，对不对啊？哎，比如说我想去更改一下他相关的借字代码，哎，我也可以通过他的名字直接可以找到，能明白吗？啊？就是一个方式啊，当然你不按这个也可以。好，那这个里面我们怎么样去找？是不是跟这个方式跟这个路径一样去找就可以了？ 这样好，我们需要去找到借字文件夹下面的 ex 零一点借字，这是两种方式啊，借字的第二种引入方式， 推荐使用这种啊，这种用的也也比较多啊，你也要记一下，好吧。
998小天的前端+Ai笔记
10:52查看AI文稿AI文稿动态创建 ok 吧，需要你动态创建的到底你页码有几个是根据后台反复的参数来决定的？哎，我给你多少个数据，我给你十页你就十页，给你二十页你就二十页，根据后台接口给的参数来决定了多少页。所以啊，这个东西需要动态创建， ok， 把它注意掉， 注意啊，里面的这些小按钮，一个一个 spa， 一个一个 spa， 就是呈现的这种样式，我们把它都给注入掉完了，注入完之后这里面拿了个名字啊，叫 tf， 是最大的容器，分叶容器，放在咱们蓝牌里面去了。 对了，然后这个里面啊，我们在注册之前呢，再给放开，再观察一下，大家来看啊，比如我现在的页面里面，第一个是首页上页一个叫 ts 配角的 start， 比方是不是这两个呀？一而我是省略，然后带昂的。第二项来看下和其他有什么不一样啊？这个页码走 第二项是不是选中，说明戴安是选中，能听见吗？戴安是选中啊，不戴安，那么大家都是灰色配件都不选中，戴安表示高亮。状态。这个样式呢，就是在刚刚给大家发的那个 cs 念里面，你自己去看就好了，然后下面还有结束， 还有一个呢，咱们会看到咱们官网上是不是有一个这样的状态，是不是不可点击的状态，这个状态也是样式写的，这个样式啊，叫菲斯。哎，我看看，看看样式， 这样是你可以自己写啊，但是现在不建议大家去写，要不然时间浪费太多了啊。好，找一下叫啥，在这叫得起得起得起哎，对， 叫 case a 吧 plus， 明啊点，既叫 spa， 又叫 dc， ok， 拿过来加上去好，再看在上面，比如说首页这个位置哈，我再加上去， dc 加个 plus 名啊，来，再看咱们效果走好。行， 这个没事，小手小手，他是不是禁止了啊？只是呈现的状态，明白吗？并不是说一定不能点，你懂我这意思吧？ ok， 那么现在呢，咱们把这个东西全部注入掉，我们知道这个结果之后开始来写这个 gs， 咱们刚说了第一步，我先写首页和上页使用时间出就是第一步，带上 ok 来做， 那么下面咱们的 gs 啊，也放在蓝莓派点 gs 里面， ok， 我们下面要抽的容器是不是都是这个分文器啊？获取这个容器啊，来去做好， ok， 写分样 减肥啊，上面你可以关掉一下啊，往下走，来去写肥点。注意啊，这个分页的功能咱们刚出来哈，分页咱们可以分两大块，巨蟹第一大块，是不是这个元素需要动态创建呀？动态生成第二个，第二个是在这里面，每一个上面的这个小按钮都有事件，你看看能看到吗？ 哎，都有点击事件，那再说事件的事。第一件啊，怎么先动态创建？虽然我们这里还分两个方法去做。第一个方法呢，咱们让他去动态的去创建元素， 第一个哈，去动态的去创建元素，这是第一个方法。第二方法哈，咱们是添加事件的，有两个方法，注意哎，添加事件 有两个大函数来做的东西。好， ok， 那么先写第一个添加元素， ok， 我先把它分成方法，比如说 a、 d、 d 配件吧，拼接先加页面， a、 d 配件， a、 d 配件，咱们来看哈，这里页码里面，咱们是不是要知道总的页码数呀？因为它是可变的，对吧？你今天十，可能明天二十，还要 知道一个是不是当前选中的页码呀？哎，我要知道两个值，一个是当前选中第几个页码，一个是总的页码数， 能理解吧？哎，所以哈，在动态片的时候我有两个参数，一个参数表示当前野马比如说是一，总野马比如说是八，可以吧？或者说咱们先减十， ok 吧？注意哈，这里有两个三数，其中参数一是 当前选中的这个页码，也就是咱们高亮的这个页码啊。参数二是不是总的页码数能列吧？这两个东西是随着变的，因为你点谁变谁了，总页码数是随你的数据变的。好，那我们先写正在元素创建方式， ok， 上面接着两个小组，第一个比如说我叫卡上的西庸啊啊，印尼，咱们当年的时间学过， 然后另外是 max 配件，总页码数，我方人需要写函数，叫 a d 配件， 可以吧？两个参数。好，咱们说了哈，这个元素是动态创建的，你说现在什么都没有，我是不是动态的那个添加呀？那么添加咱们咱们是不是得分析情况呀？比如说什么时候能出现首页，什么时候能出现上页呢？ 弄这个意思吧。好，咱们点一下来看，你看啊，他跟谁有关系？大家看，如果我当前的这个光标选择当前的高亮状态选择了一，还有首页吗？ 看到没？因为一本身就是首页，能理解吗？一本身就是首页，里头人都不行，我这要求需求，我就是首页都一直显示。那你得看你的 这个效果啊，看你的效果你怎么写？你的这个判断逻辑能听见吗？像咱们现在是不是一的时候一本身首页咱们就不让首页显示了呀？哎，当我是二的时候呢？ 显示了，为什么？因为二的话不是首页的是吧，所以可以显示首页上，你看都可点对不对？而且一的时候是不是这个东西还不可点怎么办？条件是谁啊？ 和总验码现在现在是不是没有关系啊？和谁有关系啊？当前高粱的元素对吧？如果当前高粱元素怎么样， 大于一是不是？是不是首先就上线出来了？注意哈，你这个插入的顺序一定要先考虑最左侧出现谁，因为你是依次追加， 能理解吗？一定要先考虑左侧出现谁，你别想着先出现一页，不是要先考虑首页和上一页从左依次到右追加能理解吧？从左走的啊，所以你要先考虑什么时候出现他，再考虑别的，能理解吧。好，来看 好当这个光标大于他的，当小目的录好来判断了啊。但是呢，当前的这个喀瑞呢是吧，大于 一的时候等于一数，没有大一的时候干嘛？是不是给他追加元素，分别是首页按钮和上页按钮，能练吗？大一的时候有 ok 给谁回家？是不是给咱们的这个容器啊？ ts 配件对吧？ ok， 我们给他起个 plus 名字获取一下可以吧啊，在上面获取也可以啊，我在这里面获取也行啊，或者在外面直接全部获取可以吧。这还有人叫 ts 翠姐吧，可以吧。等于本周元素点 ts 下滑链是吧，是这个名字吧。哎， ts 翠姐好不在这里货了，在外面货去了 是我看的是吧。 ts 小型配件 ok 那好了，如果你大一的话我这个 ts 配件里面是要加元素的呀。好追加元素叫 app 硬币对吧。加谁？是不是加这两个加这两个看到没，能看到吗？哎。动态中间两个数把这两个数加进去好直接扔里面去。注意啊，他会有画行要么你就用模板走上吧 能看到吧。哎放里面去了，注意你放里面之后注意这个地方。 dc 宝是不是不需要呀他你大于一了是不是手要可点呀。 dc 宝不需要啊如果大于 一就出现了如果你大于一就出现了然后呢你大于一有首页了，否则呢是吧啦否则二次是不是你小于等于一啊小于等于一这里面有谁啊只有上一页对吧，而且上一页 不可点对吧。哎给他干掉了不要了我如果你大姨我是插这个否则我就是插这个上一页而且这里面要加这个蕾丝哎不哎。有没有币。 还没有，这是 c 股是不是写好了这里好，来看一下此时我传的三是几一是不是只能出现一个上衣啊。好，来看一下咱的数据是否出现一个按钮 呀，咋一个也没有哎。哦参与什么了？一一和十 这上面会是一样的呀。大于一 ts 配件 ts 配件有问题吗？来我把它放里面去啊。等我一下啊放里面去 哎放外面怎么喝酒不到啊。这元素不是一直静下来啊 谢谢啊 挖在哦。是是是雕在这里对吧啊先获得他然后再雕。是的，这个顺序忘了好再来看走是不是有了是我的问题啊现在 ok 是这样的呀，一的时候有了。好，如果我现在是二，是不是刚刚咱们看到了？是二，大家来看是不是出来了， 手也上也，我现在没有这个阴影，能看到吗？手也上也出来了，是不是出来了呀？哎，就这个内容，那么下面再往下推是不是一次待会往下推了，这里还要注意啊，小心啊，因为这个地方还有一个，这个点看到没看到吗？哎，你看这个点什么关系？同样的推，大家看一二三 四的时候是不是出来了呀，那条件是什么呀？大于三是不是只要你大于三，因为我当前光标显示的是不是五个页码呀？ 是你大于三，如果是三的话是不是刚好显示一二三四五对吧，看到没，大于三的时候是不是出院呀？哎，注意哈，还要继续往下走啊，这个哈，所以哈，这个是第一步哈，我们要给他显示首页和 上页对吧，然后继续啊，你要一定要从左走啊，你别急着插分页的啊，你要显示谁呢？显示这个继续显示啊，显示首页上页还要显示谁呢？这个三个小点对吧？啊，三个小点，所以这里刚刚大家看到了又去判断了当前的这个元素咖瑞的地靴大于 三是吧。 ok， 加小点，这个好加啊，给拿过来把这小点给大家一块加上去啊，来看下这小点小点是这个东西啊，哎，哪有钱了，待会再去写验码，验码稍微有点麻烦。 ok， 是这样的，好，走在哎，我得大于三了对吧，我这里传一个四可以吧，走是不是有了呀？好，一四然后走就行。 ok， 大家先把这一点写着啊，待会再把它写到。
21尚学堂（北京）
22:55查看AI文稿AI文稿这个视频带大家来做这么一个无缝连接的图片轮播的效果，我们来看一下我们要实现的功能有哪些。 首先我们这个图片轮播呢，它里面有五张照片不断的在循环播放，当我们一打开页面的时候呢，照片它是从右向左滑动的，当我们把我们的这个鼠标移进去图片里面的时候呢，它就会停止滑动， 再把鼠标移出来呢，他又会继续滑动了。还有呢就是下面这两个按钮，我们图片一开始呢，他是从右向左滑动的， 如果说我们想让他切换一下方向，我们可以点击一下这个向右走的按钮，他就会向右边滑动，再点击一下向左走呢，他又会往左边移动了。 这个效果里面呢，它涉及到我们 htmlcss 和扎巴斯克哈，不过呢也是比较简单和基础的，我们就来看一下具体是怎么实现的。 这边我们把代码放大一点，这里的话已经写了一个基础的一个 div， 这个 div 的话就是放我们图片轮播的， 然后呢这个 ul 就是放我们轮播的这些图片，下面这个 div 的话放的是我们两个按钮，现在先看一下他长什么样子啊，现在应该是很丑的，哎，就这么一个样子。 然后呢我们要把这边啊这一堆图片，首先把它的样式布局呢，先做成这么一个布局，我们来斜下它的一个 css， 我们现在就来 写一下 css， 先控制一下系统的一些内外编剧的话，先把它全部给清零哈。 然后我们先做 ul 里面的内容啊，先写这个 img， 从里面往外面写出来哈， 我们就直接啊直接写 i m g 吧，简单一点， i m g 的话，这个图片的话我们控制一下它的宽度和高度的话都是个三百像素， 三百限速的话，我们现在到浏览器看一下，现在刷新的话啊，他们的大小呢，就统一为一个三百乘三百了，因为他们本来就是一比一的啊。接着写一下这个力的样式，力的快， 温度的话给他一个三百啊，也是三百，和照片的一样，然后我们清除一下这个小点的样式，给他扔掉， 然后我们让这些照片呢，让他横着排列起来，再让这些照片的话给他一个 拍点，拍点 light， 让这些照片的话就有一定的间距哈，他的间距的话给一个二十个像素。现在我们到浏览器去刷新呢，他就应该横着排列，然后之间的话有个二十个像素的一个间距了。再接着来写写一下这个 ul， ul 的话我们给他一个宽度，宽度应该是多少呢？我们一共有五张照片，照片的话我们给他的宽度是三百个像素，然后每张照片之间呢，还有二十个像素的 一个啊，间距五张照片就是三百二十乘以五，就一共的话是一千六百个像素，然后高度就和我们照片的高度一样，也是三百像素。写完这个 ul 呢，再接着写外面的这个大盒子的样式哈， 整个大盒子他的宽度也一样，也是个一千六百，但是高度的话我们给高一点，高一点的话等一下放这两个按钮的，这里的话就给个四百啊，多给个一百个像素。 现在我们再到浏览器看，其实是一样的啊，没有没有区别，我们还要给他们做一下定位，这个定位的话我们给这个大盒子给他来一个相对定位，然后呢这个 ul 就相对他来做一个绝对定位啊，现在呢是看不出效果的，等一下我们通过 js 来控制的话，这里的话就用的上，就控制他滑动的话就是改变他们的一个位置的，这里的一个 left 的话先给他一个零，给一个零，这里还要做一个 ofloven 益处隐藏掉。现在的话是看起来是没有任何区别的，但是呢，等一下我们做这个用 gs 控制他们滑动的时候呢，就会看看出来效果了， 现在这两个按钮呢，他就不见了，不知道跑哪里去了。我们现在就通过样式来写一下，控制一下他们这两个按钮，他的一个盒子呢是这个 bu 啊，我们就通过这个 bu 来拿到他这个 bu， 这个盒子，我们给他一个四百个像素的宽度，宽度 是四百，然后因为他的大盒子这个 com 这个盒子呢，他做了一个相对定位，这样子的话我们就可以相对他来做一个绝对定位，来控制一下他的位置，然后控制他一个底部哈，一个包臀，包臀的话给他一个二十个像素。 现在的话我们可以先看一下，现在我们一刷新啊，哎，这两个按钮跑到这里来了，这里的话肯定是有问题的话，这两个按钮不可能出现在这里的，我们检查一下代码， 我们看一下，哎，疏忽大意了，这个空这个 id 选择器，我们竟然漏了一个井号，对吧？我们现在再刷新，再去看一下，现在我们再刷新的话，这两个按钮呢，他就已经出现在他的下方了，现在呢，就 是正常的。这里呢，还要让这两个按钮啊，放在我们图片轮播靠中间的一个位置，就好像我们做好的效果一样，放在这个图片轮播差不多是正下方这里哈， 然后我们来学一下我们之前学过这个水平居中的这个基础知识的话，应该知道，因为这里已经是用这个定位来做了，我们就可以给他一个 left 值，这个 left 值给多少呢啊？就是一个百分之五十， 百分之五十的一个 life 值，但是还不足以让他水平剧终哈，这里的话还要让他回退他自身宽度的一半， 这里就给他一个 transform translate translate x， 让他付百分之五十，就是往左边走他自身宽度的一半这里呢？我们再刷新看一下效果，这里呢？我们一刷， 哎，大家好像发现他并没有水平居中，对吧？这个时候我们打开控制台来看一下啊，其实这个 div 看到没有，这个 bu， 因为我们给他一个宽度是四百，大家看到这里出现遮罩的这个部分的话，他其实已经是在这个图片轮播 一个正中间啊，下方正中间的这么一个位置了。我们现在的话就调整一下这两个按钮，在这个 bu 这个 div 里面啊，在它里面的一个位置，那就可以了，现在就来写一下这两个按钮的样式，这两个按钮的话，他的 clus 也是这个 bu， 我们就拿到这个 bu 这两个按钮，然后给他一个高度，高度的话三十五个像素吧，宽度的话给他一个八十个像素，我们再做一下慢点啊，可以控制一下他们水平，水 屏的位置哈，上下为零左右的话给他一个五十个像素，现在的话我们再来刷新呢，哎，发现的话，他就他的位置就差不多就正中了哈。最后呢我们再把整个图片轮播放在我们窗口的正中间的位置呢，那我们这个布局就算结束了， 这里我拿到这个波底来做 玻璃的话，给他一个百分之一百的四口高度哈，百分之一百的四口高度，然后让他 display 为一个弹性盒， 用这个弹性盒子来控制一下里面的内容，水平和垂直都是居中的，再来一个侧轴的，也是一个 stand， 然后我们再来刷新，哎，他就放在我们 四口的正中间的这么一个位置了。好，那布局这一部分的话就写到这里，布局的话简单一点，就没有写的很精美的那种感觉。我们主要来看动画这一块，我们用 js 是怎么实现的，这里就来分析一下我们这个图片轮播这这一块的一个思路， 这里呢我就画了这么一个图，简单的代表我们这个图片轮播这十个小块就是我们的照片，我们通过 js 的话，首先要把我们五张照片给他复制多一份，让他变成十张，这样子的话他才可以进行一个无缝连接。 然后呢我们就控制我们这一十张照片哈，十张照片让他滑动，一直滑滑滑，滑到什么时候呢？滑到这一半的时候，我们迅速把这个整一个 ul 这十张照片让他 拉回来，拉到第一张照片的时候，我们通过过程序去做这一个步骤的话，大家是看不出来的哈，他拉的过程很快，所以的话是看不出来任何破绽的， 我们也就是一直在重复这么一个动作，当我们向左边滑的时候，就一直滑滑滑，滑到中间的时候呢，把它拉回来第一张，然后再滑，然后再拉，所以往左边的时候就是这么一个过程。 我们的一个判断条件呢，就是这个 officer life 和这个 officer with officer left 呢，就是我们 css 里面给这个 ul 他添加这个绝对定位的这个 left 值哈，在 cs 里面拿到呢，就是他的一个 office left， 然后这个 offsetv 呢，就是我们整个 ul 它的一个宽度啊，整个 ul 的宽度，等一下接他拿到之后就是十张照片 一个宽度了，我们怎么去判断呢？当我们这一个 u l 他在滑动，他滑啊滑，滑，滑到一半的时候，滑到一半的时候，因为我们这个 ul 他是往左边滑的，所以他这个 offs 的值呢，是越来越小，但是绝对值来说是越来越大的。 当他这个值小于整个 ul 他这个 offsetv 的一半的时候呢，我们迅速把他拉回来，拉到第一张起始的位置，重复这一个步骤呢，他就会实现一个往左左边滑动的一个无缝轮波的这么一个效果了。 如果这个 ul 往右边滑的话，我们又怎么去判断呢啊？当我们这个 ul 他滑往右边滑，当他滑到左边这里哈，左边这里这个 offs 了，他等于零，他即将大于零的时候呢，我们让他回 回到这个 ul 一半的位置，也就是让这个 offset left 等于这个 offset with 他一半的大小， 他就可以实现这个啊图片轮播无缝连接的这么一个效果了。就他往右边滑，一直滑，滑到这里，他这个 offs 量呢，马上大于零了，就让他回到一半啊，回到这个 ul 一半的大小。这里哈， 好，思路，大概就是这样子，那我们呢，就正式来写一下他 gs 部分的一个代码哈， gs 呢，我们直接写在 html 页面里面，我们写在玻璃上面，这里，这里的话一直接通过一个可以标签。 接着呢，我们就要通过这个 js 拿一下我们需要操作的这些元素，这个 ul 刚才说了，我们要让他复制一份啊，这个 ul 的话我们要拿到， 还有这些 li 这些图片都要拿到，还有这两个 bot 按钮。好，首先呢，我们先拿一下这个 ul 哈，这个 ul 的话先声明一下，辣的一个， 然后通过这个 document， 这个 call it the letter 拿一下我们的 ul， 这样子的话，我们这个 ul 这个对象就拿到了。然后我们应该怎么样让这个 ul 他自己复制一份呢？这里也很简单，这里有一个 oul， 有个 innerhtml， 我们让他这个 h 填标自身加，等于他自己这样子的话，他就可以复制一份了。 我们再拿一下这些小粒，这些小粒的话给他一个 ali， 这里通过一个科列史料， 哦，把这些小链拿，拿一下，再拿一下我们的这两个按钮 也是一样的，也是 chris letter or 把它的类名呢传一下 这里，我们这些 ul 这个 ul 已经拿到了，他已经是复制了一份，里面已经有十张照片了，但是这个 ul 他本身的宽度呢，是不足以放得下这十张照片的，所以我们这里必须重新给他计算一下他的宽度。 那他这个宽度这个时候应该怎么去定义，怎么去计算呢？我们这里已经把所有的小列拿到了，而且他是一个数组来的，我们随便拿到他数组里面的任意一个，我们拿第一个，还要拿到他的一个宽度哈，他一个 再乘以一个整个数组里面一共有多少个小列，我们复制了一份啊，拿到这个数组他的一个长度，再加上单位给他就可以了。 这里的话我们可以弹一下，看一下我们有没有把这个重新定义过的，这个有要他的宽度有没有拿成功哈，我们放进去。 我们刚才我们刚才写的时候呢，这个 ul 我们写的宽度是多少？我们我们看一下 这个 ul 呢，我们写的宽度是一千六，我们复制了一份哈，已经这里复制了一份。然后呢又重新计算了他的宽度，把十张照片十个小绿的宽度传给了他。这里的话如如果没有意外，这里弹出来就应该 是三千二百个像素。哎，这里没错，这里的话我们就可以接下来写。 其实我们这里还要定义一个东西哈，给他随便起一个名字，叫一个别的一个速度，就是控制我们这一个图片轮播他滑动的一个速度来的哈，这里的话我先给他一个直付二。 还有这里呢，还要写一个让我们这个图片轮播他运动起来的这么一个函数，我们叫木 木服呢，我们要判断一下，当他往左边滑动的时候， 往左边滑动呢，我们刚才说了，但我们这这个 ul 啊，这十张照片他一直滑，滑到 一半的时候啊，我们马上要把它拉回来，也就是说他这一个 office officer left 这个值，当他小于他一半的宽度啊， officer with 他一半的宽度的时候呢，就要让他重新为零。 所以这里就是我们的这一个 o u l 它的一个 offstair left 当它小于副的哈，这里是个副词 o u l had a 自身的一个 officer with， 然后呢，除以二，也就是一半。当这个条件成立的时候，我们就要重新对他这个 oul 他的一个 left 让他重新为零，哈，重新为零。这里呢是空 控制他往左边来移动的，我们再来判断一下他往右边移动的一个条件，这个条件应该怎么判断呢？我们回到这个图，当我们这个 ul， 当这个 ul 他往右边来滑，哈，一直滑，他是不是滑到第一张照片这个 off the lap 马上大于零的时候，我们是不是要让整个 ul 他回到他自己宽度的一半啊，也就是回到这个中线了， 回到这里啊，回到这里，让他再重新往右边来移。这个时候是不是啊？单这个 offset left， 当这个 offset left 当他的值马上大于零啊，我们就让他回到这个 offset with 一半的位置哈，所以呢，这里就这样子来写我们这个 o u l 他的一个 offset left 值，当这个 offset left 值大约零的时候呢，我们马上重新对他这个 left 值进行一个副职 复制，多少呢？也就是上面他这一个 ul 他宽度的一半， 然后呢，再加上一个 ps 给他，这样子呢，我们就对他往左边移和往右边移的条件就已经判断好了。接下来呢，我们就可以控制一下这个 ul， 让他有一个动起来的这么一个速度，也就是说我们要改变一下他的一个 left 子，让他 不断的改变它的一个位移，我们可以拿到这个 ul 啊，这个 ul， 它的一个 office left， 这个 office left 呢，我们 我们可以给他一个速度，等一下的话，我们就通过这个定时器不断的改变啊，不断的改变，让他不断的重复复制给他呢，他这个 left 子呢，他就会发生变化，这样子的话他就会产生这一个移动运动的这么一个效果哈，这里再加上一个单位， 这里这个死壁啊，这个速度哈，我们前面这里定义的话，初始化是给他一个副职，也就是说让他一开始他是往左边来滑动的， 下面的话我要让他自动可以运动起来呢，我还要给他做一个定时器，这定时器的话随便给他一个名字， 然后来个 set interval， set interval 呢，把我们这个函数放进去，然后让他每三十个好好秒啊，就运动一次。现在的话我们可以到浏览器啊看一下这个效果。这时候呢， 那我们一刷新我们就可以看到我们这个图片轮播呢，他就已经可以运动起来了。我们试着修改一下这个死逼这个数值哈，把它从负二改成一个正二， 没意外的话，他应该就是往右边来移动啊，正数的话就是往右边来移动，把这个值把它改大一点，这个时候呢，他运动的速度啊，就会快很多了， 我们还是把它改成一个负二，让他一开始呢是往左边来移动的，现在呢我们还要添加上这么一个效果， 也就是说当我们鼠标移到我们这个图片轮播里面的时候呢，这个图片轮播他会停止播放，再移出来他又会继续播放。这里的话我们要怎么做呢？ 其实这里很简单，我们只需要找到我们这个鼠标需要操作的这个对象，也就是这个 ul， 然后的话给他添加一个事件监听，监听的话监听什么事件呢？就是我们这个猫是 over 这个事件，这个事件需要让他干嘛呢？ 需要他帮我清理这个定时器哈，清理这个胎儿这个定时器， 这个时候我们就可以去浏览器，我们一刷新，哎，运动呢，他是没问题的，当我们把鼠标放上去，他就会停止运动了， 只是说我们现在把鼠标移出来呢，他还不会继续帮我们运动起来，没关系，我们接着往下写，我们现在要让我们这个鼠标移出这个 ul 的时候，这些图片他又可以继续 运动起来，这个时候呢，我们可以给这个 ul 再加上一个事件监听哈，这个时候我们需要监听什么事件呢？就监听这个鼠标他移出来这个事件，也就是这个猫啊，这个事件监听了之后我们让他干嘛？ 监听到这个事件的话，我们就要让他是不是重新开启这个定时器啊？那这个定时器重新开启我，我们应该怎么做呢？是不是直接一个 set interval 就可以了？我们这里看起来好像可以，我们试一下， 我们到浏览器哈，我们现在一刷新，当我们鼠标移进去的时候，他确实可以停了，然后移出来，哎，他又运动了，看起来没有什么问题。我们再次糟了，我们发现现在他停不下来了，然后出来，哎，他越来越 快了，越来越快，对吧？这里是什么情况呢？大家有没有发现在我们做这个猫是奥这个鼠标移出去的这一个事件监听的时候， 我们只是让他开启了一个定时器，但是并没有把之前这个定时器啊给他覆盖掉，也就是说当我们把鼠标移进去，他这里确实是 看电影了，把这胎母这个电池器给清掉了，但是他并没有清到这一个啊，对吧？这一个他并没有清掉，所以呢，我们必须把这个胎母在这里给他重新复制一下， 所以这里的话我们再去浏览器，我们刷新，哎，这个时候放进去移出来没问题，放进去移出来没问题，哎，这样子他就没有问题了，我们现在就剩下呢，就这两个按钮，控制一下他的 运动的一个方向，这两个按钮，哈，我们回到代码这个时候，其实想让这两个按钮来控制他运动的方向已经是非常简单了， 我们上面已经把这两个按钮都拿到了，这里是个数组，放的就是我们这两个按钮。还有刚才说了我们要控制这个运动的方向呢，就修改这个识别的他的一个正副直就可以了，副直他就是向左运动，正直呢，他就像右运。我们来给这两个按钮绑定一下事件啊， 先拿到第一个按钮，给他添加上一个昂克力事件，昂克力之后，也就是说点击之后我们要让他干嘛呢？ 是不是直接修改这十笔？直修改他的一个正负值就可以了，对吧？让他是一个负数，这里的话还是负二，然后第二个扭负 这一份哈。这里的话第二个按钮被点击的话，直接让他变成一个正数。现在呢？我们就到浏览器去刷新看一下这边一刷新，哎，没问题哈，放进去没问题，移出来没问题，然后让他向右走， 哎，向左走都没问题。好，那我们整一个图片轮播这一个项目的话就做完成了。好。
741小K师兄
03:53查看AI文稿AI文稿今天我们来做一个识别图片上的文字啊的一个功能啊，我们看一下效果。先打开一下控制台，我们点识别文字， 看这里有个进度啊，等到一的时候，他就会把我们的一个识别出来的文字显示到这里。稍等一下，好，出来了，看到没，是吧？我们的图片的一个文字，这个显示出来了。好。然后我们也可以选择一张图。好， 我们控制台显示一下来，这是电刚才选的那张图的文字啊。要实现这个效果其实很简单，我们也是用到了一个酷，就是用到这个 chance right j s 这个酷啊， 你看它这里也有一些 demo， 你看它第一个识别图片是吧，它还可以实时识识别这个视频的一个字 对吧？好，我们就来试一下看一下这个代码啊。好，我们的刚才我们的代码在这里。第一步我们先引入我们的这个 test right 这个 g s 我们用一个 cd 音啊，防那个直接定的一个外部的一个好，然后这里就是一个图片一个按钮。然后这里就是个 d i v 显示我们的那个识别出来的文字。好，点击这个按钮，我们触发这个视线啊，就在这这一块啊， 这块获取两个洞是吧？获取一个图片一个那个内容的 d i v， 显示内容的 d i v 好，我们就第二这个 test right 这个 ipad 好。第一个参数就是我们的一个图片啊。第二个就是传我们的一个语言，我们例如英用英语或者一个中文，我们这里是使用的一个中文啊 啊。第三个就是它的一些配置，然后最后把我们的一个获取的一个文文字内容显示到这个 d i v 上面，这主要一个问题，我们 先把这个去掉看一下，回到我们的一个代码，好把它我们之前本地存的这个也把它删了。好， 我们点识别文字看一下啊。哎，你看你们发现没，他到了刚开始的时候就不动了，然后看下请求，你看他这个一直在请求，因为他访问的是个外部的一个 这个地址啊，加的会比较慢，所以我们这一块也改一下，我们第一个先到这个地址，你看这里有一个这个 test debt 啊， 我们可以用用这个，你看他说这个快，最快的好，我们就用这个用这个，我们要把它改一下，我们把它下载下来，我们通过我们通过这个地址把我们的下载下来，我们只要把这个音机改成我们的这个，我们这里的 c h i 下网线 s i m 啊，把它替换一下，就大概是这样。嗯， 好，这样我们就可以把它回去，我们就可以把它下载下来啊，下载下来就放到我们的一个本地，你看放到这里放本地之后我们怎么用，我们就用这个，刚才刚才我们这个我们这里写个空，写个空的，他就会到我们当前这个目录去找啊，点这个目录。 好，我们再试一下，我们点识别，你看是不是现在就很快对吧，因为那个地址他 比较慢啊，会要等好久，所以建议大家把它放下来对吧。你看就完成了我们的这个图片上的文字的一个识别，然后这里也是一样的啊，这是这张图，你看这张图 一个十月， 好等到成功是吧， 你看这识别了我们的一个文字，是不是通过这个库非常方便对吧？好，大家有兴趣可以看一下这个库啊，然后尝试一下一些能做一些功能。然后他同时刚才我们是通过一个 vivo 浏览器的形式是吧，他也同时也支持一个 note g s 啊， 更多的 g s 去使用。好，这就是我们这一节的这个图片文字识别。今天分享就到这里。
244前端老鹰
