计算机视觉入门 之初识 opencv.js

本文作为计算机视觉入门系列第一篇分享,主要介绍当下比较热门的计算机图形处理库 OpenCV。本文将从 OpenCV.js 的编译方法、基础概念、常用 Api 使用样例以及辅助实现验证码识别的简单实战四个方面入手,帮助大家快速了解并上手 OpenCV.js。 随着近些年移动设备上面部识别,AI 美颜等功能的火热,作为目前最热门的计算机图形处理库 —— openCV 开始大放异彩。 OpenCV ,全称 Open Source Computer Vision ,是一个基于 BSD 许可(意味着它可以被用于商业应用)的开源跨平台计算机视觉库,由 C 函数和 C++ 类构成,并且提供了多个语言的接口[1]。OpenCV提供了大量图像处理的功能,从图像显示,到像素操作,到目标检测等,大大简化了图形处理以及深度学习应用的开发过程。OpenCV.js 是 JavaScript 开发者与 OpenCV 计算机图形处理库之间的桥梁,起先仅仅是部分 JavaScript 开发者自行开发的 OpenCV 应用接口,其原理是借助一款 LLVM-to-Javascript 的编译器 —— Emscripten 将库底层 C++ 代码编译为可在浏览器运行的 asm.js 或者 WebAssembly ,后来该项目日趋完善,并于 2017 年并入整个 OpenCV 项目。 小贴士 WebAssembly 是一种新的编码方式,可以在现代的网络浏览器中运行. 它是一种低级的类汇编语言,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如 C/C++ 等语言提供一个编译目标,以便它们可以在 […]

【译】理解 CSS 布局和块级格式化上下文

原文链接:https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/ CSS布局中有一些概念是你一旦理解它那么就会极大的提升你的 CSS 技能的。这篇文章是关于块级格式化上下文的 BFC 。也许你从未听说过这个术语,但是如果你曾经用 CSS 做过布局,那么你也许知道它是什么。理解什么是 BFC ,它为什么会起作用以及如何创建一个有用的 BFC 可以帮助你理解 CSS 布局是怎样工作的。 在这篇文章中,我将通过一些你可能熟悉的例子解释什么是 BFC 。我将向你展示一个新的概念,当你明白什么是 BFC 以及你为什么需要它的时候,它才真正有意义。 什么是 BFC? 最容易明白一个 BFC 表现的是一个浮动的例子。在下面的例子中有一个盒模型,其中包含一张左浮动的图和一些文字。如果我们有大量的文字,它环绕在浮动的图像上,则边框会围绕着整个区域。

图1:文本环绕着浮动元素 如果删除了一些文本,那么文本就不足以环绕图像,并且因为图片浮动脱离了文档流,边框就会在图片下面并且上升到文本的高度。 图2:没有足够的文本,边框就不能到达浮动元素所期望的高度 这是因为当我们在浮动一个元素时,文本所在的盒模型仍然是固定的高度,而因浮动元素而缩短的空间是文本的行框。这就是为什么背景和边框会出现在浮动元素的后面。 这里有两种我们通常修复这种问题的方式。一种是使用清除浮动 clearfix hack[1],它是通过在文本和图片下面插入一个元素并且设置清除两侧浮动来起作用的。另一种方式是使用 overflow 属性,使用其他的值来代替默认的 visible 。

图3:使用 overflow:auto 使盒模型中包含浮动 overflow 属性起作用的原因是使用任何一个其他值来代替初始值 visible ,从而创建一个BFC。即 BFC 的一个特点就是它包含浮动。 BFC 布局是一个迷你布局 你可以认为 BFC 在网页中是一个迷你布局。一旦一个元素创建的 BFC ,所有东西都包含在里面了。正如我们所看到的,它包含浮动元素使其不再超出盒子底部。同时 BFC […]

微信小程序·云开发初体验

作者:甄玉磊 微信小程序·云开发初体验 简介:2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?想想还有点小激动了呢! 2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?啥?我膨胀了吗?我骄傲了吗?我嘴角流口水了吗?只是想想还有点小激动了呢! 好了,好了,后端童鞋可以放下手里的刀了,这个微信小程序的云开发暂时还无法全面取代你们在微信端的地位,但是!不得不说给前端开发带来了很大的便利,值得前端童鞋们一探究竟。 1.什么是云开发? 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。 也就是说,对于一些小程序,我们无需后端搭建服务器,提供数据库,整个项目完全可以由前端开发者来完成。这意味着前端开发者无需考虑如何构建服务器之类的工作,即可完成整个微信小程序了。 2.云开发功能简介 好了,叨叨了这么多,想必你已经迫不及待的要揭开它神秘的面纱了。 2.1 云开发基本步骤 (1)俗话说“巧妇难为无米之炊”,首先要做的就是下载微信提供的最新开发工具,网址为您奉上: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18101520 (2)在启动界面,选择”建立云开发快速启动模板”,就可以看到下面的开发平台了: 其中,系统默认会建立两个文件夹,分别为: – cloudfunctions 默认存放云函数的文件夹 – miniprogram 默认存放业务代码的文件夹 如果你觉得,这是神马名字,能不能起个高大上的名字。只有私人订制版的名字,才能衬托我无与伦比的高贵气质~ 比如说:李狗蛋和王钢柱… 敲黑板,注意了,当你修改名字后,一定要记得在 project.config.json 中对应修改云函数和程序的路径,否则小程序无法找到对应的入口文件而报错。 2.2 云开发切换环境 细心的童鞋可能发现,云函数的文件夹后面带有一个 cloud-demo 的小尾巴,这个是当前云函数使用的云环境。云环境有啥用处呢? 由于云开发是实时上线更新的,假如你已经上线了一版小程序,在本地开发的时候,实时修改该环境下的数据库和云函数逻辑,那么使用同一环境的线上小程序也会变来变去,再想想用户一脸茫然的看着自已动来动去的小程序界面,很调皮是不是? 好在,微信给每位开发者提供了两套环境: 环境之大, 一次用不下, 一个上线, 一个开发! 每套环境的数据库/云函数都是相互独立的,只有在测试环境检查的没有问题了,再部署到线上。那么问题又来了,如何切换使用的云环境呢? 右击云函数文件夹,如果之前切换过环境的话,会出现两个候选环境,如果之前没有切换过,则选择更多设置,如下图所示在新打开的界面中选择当前要使用的环境即可。 好了,环境准备好后,让我们开始愉快的(踩坑)开发之旅吧! 3.云开发的三大”拦路虎” 曾经有位名人“沃·滋基硕德” 这样教导我们:“你在奔向成功的路上总是会遇到困难,不要伤心,慢慢就习惯了!” 云开发包括三大主要内容:云函数,数据库,存储管理,相当于拦路虎一样,横跨在我们面前,在使用过程中需要注意哪些事项呢?让我娓娓道来: 3.1 大虎:云函数 何为云函数? 云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。 我们可以在代码区域的云函数文件夹,右击新建 node.js 函数,之后平台会提示我们是否安装依赖: 如需在云函数中操作数据库、管理云文件、调用其他云函数等操作,可使用官方提供的 […]

利用交叉观察器解锁懒加载新姿势

作者:宋成林 懒加载,一个在我们前端性能优化中高频出现的词汇,无论是懒加载图片还是懒加载模块,无非都是希望用户可以在滚动指定视区再去加载相应的资源, 从而达到节省用户流量、提升首次加载时间、减轻服务器的压力的目的。 “懒加载”不是一个新的概念,对于经验丰富的你们来说,一定积累了很多实现方法,但为什本文还要提出来呢?因为我们开发过程中,常用的实现方式都是通过监听页面的 scroll 事件来实现的,这种方法在使用过程中,scroll 事件会被高频触发,强制浏览器重排和重绘,从而不断增加浏览器的压力,导致浏览器性能的损失,有时可能出现卡顿或是闪烁的现象,即使使用了节流与去抖等方法,但还是会产生高昂的计算开销。那是否有更好的方法来解决呢,本文会讲解一种新实现方式,在此之前,先让我们回顾一下常用的实现姿势吧! 常用姿势 姿势一:getBoundingClientRect() 方法 通过 Element.getBoundingClientRect() 方法可以返回元素的大小及其相对于视口的位置。 rectObject = object.getBoundingClientRect() ;返回值 rectObject 对象包含了一组用于描述边框的只读属性—— left 、top 、right 和 bottom ,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。 如下图: 随着页面滚动,我们可以获取懒加载元素相对于视口的顶点位置 rectObject.top 的像素值,当这个值小于可视区高 window.innerHeight ,表示已经进入可视区,开始加载数据,如果要提前加载,可以设置一个 threshold 阈值。 姿势二: 首先我们获取元素 Element.offsetTop ,获取可视区高度 window.innerHeigh 。 随着页面滚动,实时获取滚动条的高度 scrollTop ,如果元素 Element.offsetTop – 滚动条的高度 scrollTop 小于可视区高度 window.innerHeight 的时候,开始加载数据。 这两种实现方式都是通过监听页面的 scroll […]

快速小程序开发之微信小程序内嵌 H5

作者:王悦 微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以及在实战中如何调试一次性带你感受小程序内嵌 H5 的风采,帮你更有底气的使用微信小程序新组件 web-view。 一、技术选择: 1.H5 转成小程序方案路线优缺点对比: 上表是从原有 H5 转相似业务逻辑的微信小程序的方案路线优缺点对比,基于时间的限制以及当前主流多端编译的可靠性考量,最终团队认为通过使用小程序组件 web-view 内嵌 H5 的方式比较适合当前的开发需求。 web-view 的兼容性问题主要是要在基础库在1.6.4+及以上才可以用,而微信官方统计基础库在1.6.4+ 的覆盖率已达 95% 以上,这个指标也符合产品大人的要求,于是便愉快的选择了 web-view 内嵌 H5 的技术方案。 2.H5 和小程序技术对比: 从上表中可以对比出 H5 相较于小程序的优缺点,方便各位前端大大评估需求。尤为重要的是因为小程序封装的比较严重所以小程序开发的灵活性没有 H5 那么高,这就要我们注意对交互设计的评估。 二、web-view 微信小程序配置系列问题 1、配置域名 注意: 业务域名中配置的就是小程序以及 H5 和 H5 中引用 iframe 的域名。这里要特别注意的是假如 H5 中有内嵌的 iframe 也要配置进去 这里需要服务端的朋友配合一下,将校验文件放置在将要嵌套的业务域名的根目录。所以要注意后端是否可以支持,否则会有各种扯皮的问题 2、选择基础库 开发的时候不要忘记配置微信小程序的基础库,注意 […]

© 2019 JDC. All Rights Reserved.