欢迎访问我的GitHub

这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos

本篇概览

  • 本文是《JavaCV的摄像头实战》系列的第十四篇,如标题所说,今天的功能是检测摄像头内的人是否带了口罩,把检测结果实时标注在预览窗口,如下图所示:

  • 整个处理流程如下,实现口罩检测的关键是将图片提交到百度AI开放平台,然后根据平台返回的结果在本地预览窗口标识出人脸位置,以及此人是否带了口罩:

问题提前告知

  • 依赖云平台处理业务的一个典型问题,就是处理速度受限
  • 首先,如果您在百度AI开放平台注册的账号是个人类型,那么免费的接口调用会被限制到一秒钟两次,如果是企业类型账号,该限制是十次
  • 其次,经过实测,一次人脸检测接口耗时300ms以上
  • 最终,实际上一秒钟只能处理两帧,这样的效果在预览窗口展现出来,就只能是幻灯片效果了(低于每秒十五帧就能感受到明显的卡顿)
  • 因此,本文只适合基本功能展示,无法作为实际场景的解决方案

关于百度AI开放平台

编码:添加依赖库

<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>3.10.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.0</version>
</dependency>

编码:封装请求和响应百度AI开放平台的代码

  • 接下来要开发一个服务类,这个服务类封装了所有和百度AI开放平台相关的代码
  • 首先,定义web请求的request对象FaceDetectRequest.java:
package com.bolingcavalry.grabpush.bean.request;

import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; /**
* @author willzhao
* @version 1.0
* @description 请求对象
* @date 2022/1/1 16:21
*/
@Data
public class FaceDetectRequest {
// 图片信息(总数据大小应小于10M),图片上传方式根据image_type来判断
String image; // 图片类型
// BASE64:图片的base64值,base64编码后的图片数据,编码后的图片大小不超过2M;
// URL:图片的 URL地址( 可能由于网络等原因导致下载图片时间过长);
// FACE_TOKEN: 人脸图片的唯一标识,调用人脸检测接口时,会为每个人脸图片赋予一个唯一的FACE_TOKEN,同一张图片多次检测得到的FACE_TOKEN是同一个。
@JsonProperty("image_type")
String imageType; // 包括age,expression,face_shape,gender,glasses,landmark,landmark150,quality,eye_status,emotion,face_type,mask,spoofing信息
//逗号分隔. 默认只返回face_token、人脸框、概率和旋转角度
@JsonProperty("face_field")
String faceField; // 最多处理人脸的数目,默认值为1,根据人脸检测排序类型检测图片中排序第一的人脸(默认为人脸面积最大的人脸),最大值120
@JsonProperty("max_face_num")
int maxFaceNum; // 人脸的类型
// LIVE表示生活照:通常为手机、相机拍摄的人像图片、或从网络获取的人像图片等
// IDCARD表示身份证芯片照:二代身份证内置芯片中的人像照片
// WATERMARK表示带水印证件照:一般为带水印的小图,如公安网小图
// CERT表示证件照片:如拍摄的身份证、工卡、护照、学生证等证件图片
// 默认LIVE
@JsonProperty("face_type")
String faceType; // 活体控制 检测结果中不符合要求的人脸会被过滤
// NONE: 不进行控制
// LOW:较低的活体要求(高通过率 低攻击拒绝率)
// NORMAL: 一般的活体要求(平衡的攻击拒绝率, 通过率)
// HIGH: 较高的活体要求(高攻击拒绝率 低通过率)
// 默认NONE
@JsonProperty("liveness_control")
String livenessControl; // 人脸检测排序类型
// 0:代表检测出的人脸按照人脸面积从大到小排列
// 1:代表检测出的人脸按照距离图片中心从近到远排列
// 默认为0
@JsonProperty("face_sort_type")
int faceSortType;
}
  • 其次,定义web响应对象FaceDetectResponse.java:
package com.bolingcavalry.grabpush.bean.response;

import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;
import lombok.ToString;
import java.io.Serializable;
import java.util.List; @Data
@ToString
public class FaceDetectResponse implements Serializable {
// 返回码
@JsonProperty("error_code")
String errorCode;
// 描述信息
@JsonProperty("error_msg")
String errorMsg;
// 返回的具体内容
Result result; @Data
public static class Result {
// 人脸数量
@JsonProperty("face_num")
private int faceNum;
// 每个人脸的信息
@JsonProperty("face_list")
List<Face> faceList; /**
* @author willzhao
* @version 1.0
* @description 检测出来的人脸对象
* @date 2022/1/1 16:03
*/
@Data
public static class Face {
// 位置
Location location;
// 是人脸的置信度
@JsonProperty("face_probability")
double face_probability;
// 口罩
Mask mask; /**
* @author willzhao
* @version 1.0
* @description 人脸在图片中的位置
* @date 2022/1/1 16:04
*/
@Data
public static class Location {
double left;
double top;
double width;
double height;
double rotation;
} /**
* @author willzhao
* @version 1.0
* @description 口罩对象
* @date 2022/1/1 16:11
*/
@Data
public static class Mask {
int type;
double probability;
}
}
}
}
  • 然后是服务类BaiduCloudService.java,把请求和响应百度AI开放平台的逻辑全部集中在这里,可见其实很简单:根据图片的base64字符串构造请求对象、发POST请求(path是人脸检测服务)、收到响应后用Jackson反序列化成FaceDetectResponse对象:
package com.bolingcavalry.grabpush.extend;

import com.bolingcavalry.grabpush.bean.request.FaceDetectRequest;
import com.bolingcavalry.grabpush.bean.response.FaceDetectResponse;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import okhttp3.*;
import java.io.IOException; /**
* @author willzhao
* @version 1.0
* @description 百度云服务的调用
* @date 2022/1/1 11:06
*/
public class BaiduCloudService { OkHttpClient client = new OkHttpClient(); static final MediaType JSON = MediaType.parse("application/json; charset=utf-8"); static final String URL_TEMPLATE = "https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=%s"; String token; ObjectMapper mapper = new ObjectMapper(); public BaiduCloudService(String token) {
this.token = token; // 重要:反序列化的时候,字符的字段如果比类的字段多,下面这个设置可以确保反序列化成功
mapper.disable(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
} /**
* 检测指定的图片
* @param imageBase64
* @return
*/
public FaceDetectResponse detect(String imageBase64) {
// 请求对象
FaceDetectRequest faceDetectRequest = new FaceDetectRequest();
faceDetectRequest.setImageType("BASE64");
faceDetectRequest.setFaceField("mask");
faceDetectRequest.setMaxFaceNum(6);
faceDetectRequest.setFaceType("LIVE");
faceDetectRequest.setLivenessControl("NONE");
faceDetectRequest.setFaceSortType(0);
faceDetectRequest.setImage(imageBase64); FaceDetectResponse faceDetectResponse = null; try {
// 用Jackson将请求对象序列化成字符串
String jsonContent = mapper.writeValueAsString(faceDetectRequest); //
RequestBody requestBody = RequestBody.create(JSON, jsonContent);
Request request = new Request
.Builder()
.url(String.format(URL_TEMPLATE, token))
.post(requestBody)
.build();
Response response = client.newCall(request).execute();
String rawRlt = response.body().string();
faceDetectResponse = mapper.readValue(rawRlt, FaceDetectResponse.class);
} catch (IOException ioException) {
ioException.printStackTrace();
} return faceDetectResponse;
}
}
  • 服务类写完了,接下来是主程序把整个逻辑串起来

DetectService接口的实现

  • 熟悉《JavaCV的摄像头实战》系列的读者应该对DetectService接口不陌生了,为了在整个系列的诸多实战中以统一的风格实现抓取帧-->处理帧-->输出处理结果这样的流程,咱们定义了一个DetectService接口,每种不同帧处理业务按照自己的特点来实现此接口即可(例如人脸检测、年龄检测、性别检测等)
  • 先来回顾DetectService接口:
package com.bolingcavalry.grabpush.extend;

import org.bytedeco.javacv.Frame;
import org.bytedeco.javacv.OpenCVFrameConverter;
import org.bytedeco.opencv.opencv_core.*;
import org.bytedeco.opencv.opencv_objdetect.CascadeClassifier; import static org.bytedeco.opencv.global.opencv_core.CV_8UC1;
import static org.bytedeco.opencv.global.opencv_imgproc.*; /**
* @author willzhao
* @version 1.0
* @description 检测工具的通用接口
* @date 2021/12/5 10:57
*/
public interface DetectService { /**
* 根据传入的MAT构造相同尺寸的MAT,存放灰度图片用于以后的检测
* @param src 原始图片的MAT对象
* @return 相同尺寸的灰度图片的MAT对象
*/
static Mat buildGrayImage(Mat src) {
return new Mat(src.rows(), src.cols(), CV_8UC1);
} /**
* 检测图片,将检测结果用矩形标注在原始图片上
* @param classifier 分类器
* @param converter Frame和mat的转换器
* @param rawFrame 原始视频帧
* @param grabbedImage 原始视频帧对应的mat
* @param grayImage 存放灰度图片的mat
* @return 标注了识别结果的视频帧
*/
static Frame detect(CascadeClassifier classifier,
OpenCVFrameConverter.ToMat converter,
Frame rawFrame,
Mat grabbedImage,
Mat grayImage) { // 当前图片转为灰度图片
cvtColor(grabbedImage, grayImage, CV_BGR2GRAY); // 存放检测结果的容器
RectVector objects = new RectVector(); // 开始检测
classifier.detectMultiScale(grayImage, objects); // 检测结果总数
long total = objects.size(); // 如果没有检测到结果,就用原始帧返回
if (total<1) {
return rawFrame;
} // 如果有检测结果,就根据结果的数据构造矩形框,画在原图上
for (long i = 0; i < total; i++) {
Rect r = objects.get(i);
int x = r.x(), y = r.y(), w = r.width(), h = r.height();
rectangle(grabbedImage, new Point(x, y), new Point(x + w, y + h), Scalar.RED, 1, CV_AA, 0);
} // 释放检测结果资源
objects.close(); // 将标注过的图片转为帧,返回
return converter.convert(grabbedImage);
} /**
* 初始化操作,例如模型下载
* @throws Exception
*/
void init() throws Exception; /**
* 得到原始帧,做识别,添加框选
* @param frame
* @return
*/
Frame convert(Frame frame); /**
* 释放资源
*/
void releaseOutputResource();
}
  • 再来看看本次实战中DetectService接口的实现类BaiduCloudDetectService.java,有几处要注意的地方稍后会提到:
package com.bolingcavalry.grabpush.extend;

import com.bolingcavalry.grabpush.bean.response.FaceDetectResponse;
import lombok.extern.slf4j.Slf4j;
import org.bytedeco.javacpp.Loader;
import org.bytedeco.javacv.Frame;
import org.bytedeco.javacv.Java2DFrameConverter;
import org.bytedeco.javacv.OpenCVFrameConverter;
import org.bytedeco.opencv.opencv_core.Mat;
import org.bytedeco.opencv.opencv_core.Point;
import org.bytedeco.opencv.opencv_core.Rect;
import org.bytedeco.opencv.opencv_core.Scalar;
import org.bytedeco.opencv.opencv_objdetect.CascadeClassifier;
import org.opencv.face.Face;
import sun.misc.BASE64Encoder;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.net.URL;
import java.util.List;
import static org.bytedeco.opencv.global.opencv_imgproc.*;
import static org.bytedeco.opencv.global.opencv_imgproc.CV_AA; /**
* @author willzhao
* @version 1.0
* @description 音频相关的服务
* @date 2021/12/3 8:09
*/
@Slf4j
public class BaiduCloudDetectService implements DetectService { /**
* 每一帧原始图片的对象
*/
private Mat grabbedImage = null; /**
* 百度云的token
*/
private String token; /**
* 图片的base64字符串
*/
private String base64Str; /**
* 百度云服务
*/
private BaiduCloudService baiduCloudService; private OpenCVFrameConverter.ToMat openCVConverter = new OpenCVFrameConverter.ToMat(); private Java2DFrameConverter java2DConverter = new Java2DFrameConverter(); private OpenCVFrameConverter.ToMat converter = new OpenCVFrameConverter.ToMat(); private BASE64Encoder encoder = new BASE64Encoder(); /**
* 构造方法,在此指定模型文件的下载地址
* @param token
*/
public BaiduCloudDetectService(String token) {
this.token = token;
} /**
* 百度云服务对象的初始化
* @throws Exception
*/
@Override
public void init() throws Exception {
baiduCloudService = new BaiduCloudService(token);
} @Override
public Frame convert(Frame frame) {
// 将原始帧转成base64字符串
base64Str = frame2Base64(frame); // 记录请求开始的时间
long startTime = System.currentTimeMillis(); // 交给百度云进行人脸和口罩检测
FaceDetectResponse faceDetectResponse = baiduCloudService.detect(base64Str); // 如果检测失败,就提前返回了
if (null==faceDetectResponse
|| null==faceDetectResponse.getErrorCode()
|| !"0".equals(faceDetectResponse.getErrorCode())) {
String desc = "";
if (null!=faceDetectResponse) {
desc = String.format(",错误码[%s],错误信息[%s]", faceDetectResponse.getErrorCode(), faceDetectResponse.getErrorMsg());
} log.error("检测人脸失败", desc); // 提前返回
return frame;
} log.info("检测耗时[{}]ms,结果:{}", (System.currentTimeMillis()-startTime), faceDetectResponse); // 如果拿不到检测结果,就返回原始帧
if (null==faceDetectResponse.getResult()
|| null==faceDetectResponse.getResult().getFaceList()) {
log.info("未检测到人脸");
return frame;
} // 取出百度云的检测结果,后面会逐个处理
List<FaceDetectResponse.Result.Face> list = faceDetectResponse.getResult().getFaceList();
FaceDetectResponse.Result.Face face;
FaceDetectResponse.Result.Face.Location location;
String desc;
Scalar color;
int pos_x;
int pos_y; // 如果有检测结果,就根据结果的数据构造矩形框,画在原图上
for (int i = 0; i < list.size(); i++) {
face = list.get(i); // 每张人脸的位置
location = face.getLocation(); int x = (int)location.getLeft();
int y = (int)location.getHeight();
int w = (int)location.getWidth();
int h = (int)location.getHeight(); // 口罩字段的type等于1表示带口罩,0表示未带口罩
if (1==face.getMask().getType()) {
desc = "Mask";
color = Scalar.GREEN;
} else {
desc = "No mask";
color = Scalar.RED;
} // 在图片上框出人脸
rectangle(grabbedImage, new Point(x, y), new Point(x + w, y + h), color, 1, CV_AA, 0); // 人脸标注的横坐标
pos_x = Math.max(x-10, 0);
// 人脸标注的纵坐标
pos_y = Math.max(y-10, 0); // 给人脸做标注,标注是否佩戴口罩
putText(grabbedImage, desc, new Point(pos_x, pos_y), FONT_HERSHEY_PLAIN, 1.5, color);
} // 将标注过的图片转为帧,返回
return converter.convert(grabbedImage);
} /**
* 程序结束前,释放人脸识别的资源
*/
@Override
public void releaseOutputResource() {
if (null!=grabbedImage) {
grabbedImage.release();
}
} private String frame2Base64(Frame frame) {
grabbedImage = converter.convert(frame);
BufferedImage bufferedImage = java2DConverter.convert(openCVConverter.convert(grabbedImage));
ByteArrayOutputStream bStream = new ByteArrayOutputStream();
try {
ImageIO.write(bufferedImage, "png", bStream);
} catch (IOException e) {
throw new RuntimeException("bugImg读取失败:"+e.getMessage(),e);
} return encoder.encode(bStream.toByteArray());
}
}
  • 上述代码有以下几点要注意:
  1. 整个BaiduCloudDetectService类,主要是对前面BaiduCloudService类的使用
  2. convert方法中,拿到frame实例后会转为base64字符串,用于提交到百度AI开放平台做人脸检测
  3. 百度AI开放平台的检测结果中有多个人脸检测结果,这里要逐个处理:取出每个人脸的位置,以此位置在原图画矩形框,然后根据是否戴口罩在人脸上做标记,戴口罩的是绿色标记(包括矩形框),不戴口罩的是红色矩形框

主程序

  • 最后是主程序了,还是《JavaCV的摄像头实战》系列的套路,咱们来看看主程序的服务类定义好的框架
  • 《JavaCV的摄像头实战之一:基础》创建的simple-grab-push工程中已经准备好了父类AbstractCameraApplication,所以本篇继续使用该工程,创建子类实现那些抽象方法即可
  • 编码前先回顾父类的基础结构,如下图,粗体是父类定义的各个方法,红色块都是需要子类来实现抽象方法,所以接下来,咱们以本地窗口预览为目标实现这三个红色方法即可:

  • 新建文件PreviewCameraWithBaiduCloud.java,这是AbstractCameraApplication的子类,其代码很简单,接下来按上图顺序依次说明
  • 先定义CanvasFrame类型的成员变量previewCanvas,这是展示视频帧的本地窗口:
protected CanvasFrame previewCanvas
  • 把前面创建的DetectService作为成员变量,后面检测的时候会用到:
    /**
* 检测工具接口
*/
private DetectService detectService;
  • PreviewCameraWithBaiduCloud的构造方法,接受DetectService的实例:
    /**
* 不同的检测工具,可以通过构造方法传入
* @param detectService
*/
public PreviewCameraWithBaiduCloud(DetectService detectService) {
this.detectService = detectService;
}
  • 然后是初始化操作,可见是previewCanvas的实例化和参数设置,还有检测、识别的初始化操作:
    @Override
protected void initOutput() throws Exception {
previewCanvas = new CanvasFrame("摄像头预览", CanvasFrame.getDefaultGamma() / grabber.getGamma());
previewCanvas.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
previewCanvas.setAlwaysOnTop(true); // 检测服务的初始化操作
detectService.init();
}
  • 接下来是output方法,定义了拿到每一帧视频数据后做什么事情,这里调用了detectService.convert检测人脸并识别性别,然后在本地窗口显示:
    @Override
protected void output(Frame frame) {
// 原始帧先交给检测服务处理,这个处理包括物体检测,再将检测结果标注在原始图片上,
// 然后转换为帧返回
Frame detectedFrame = detectService.convert(frame);
// 预览窗口上显示的帧是标注了检测结果的帧
previewCanvas.showImage(detectedFrame);
}
  • 最后是处理视频的循环结束后,程序退出前要做的事情,先关闭本地窗口,再释放检测服务的资源:
    @Override
protected void releaseOutputResource() {
if (null!= previewCanvas) {
previewCanvas.dispose();
} // 检测工具也要释放资源
detectService.releaseOutputResource();
}
  • 每一帧耗时太多,所以两帧之间就不再额外间隔了:
    @Override
protected int getInterval() {
return 0;
}
  • 至此,功能已开发完成,再写上main方法,代码如下,请注意token的值是前面在百度AI开放平台取得的access_token:
    public static void main(String[] args) {
String token = "21.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxx.xxxxxxxxxx.xxxxxx-xxxxxxxx";
new PreviewCameraWithBaiduCloud(new BaiduCloudDetectService(token)).action(1000);
}
  • 至此,代码写完了,准备好摄像头开始验证,群众演员为了免费盒饭已经在寒风中等了很久啦

验证

  • 运行PreviewCameraWithBaiduCloud的main方法,请群众演员出现在摄像头前面,此时不戴口罩,可见人脸上是红色字体和矩形框:

  • 让群众演员戴上口罩,再次出现在摄像头前面,这次检测到了口罩,显示了绿色标注和矩形框:

  • 实际体验中,由于一秒钟最多只有两帧,在预览窗口展示时完全是幻灯片效果,惨不忍睹...

  • 本篇博客使用了群众演员两张照片,所以被他领走了两份盒饭,欣宸很心疼...

  • 至此,基于JavaCV和百度AI开放平台实现的口罩检测功能已完成,希望您继续关注《JavaCV的摄像头实战》系列,之后的实战更精彩

欢迎关注博客园:程序员欣宸

学习路上,你不孤单,欣宸原创一路相伴...

JavaCV的摄像头实战之十四:口罩检测的更多相关文章

  1. JavaCV的摄像头实战之四:抓图

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<JavaCV的摄像头实战> ...

  2. JavaCV的摄像头实战之七:推流(带声音)

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<JavaCV的摄像头实战> ...

  3. JavaCV的摄像头实战之一:基础

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 关于<JavaCV的摄像头实战>系列 &l ...

  4. JavaCV的摄像头实战之二:本地窗口预览

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  5. JavaCV的摄像头实战之五:推流

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<JavaCV的摄像头实战> ...

  6. JavaCV的摄像头实战之六:保存为mp4文件(有声音)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. MP实战系列(十四)之分页使用

    MyBatis Plus的分页,有插件式的,也有其自带了,插件需要配置,说麻烦也不是特别麻烦,不过觉得现有的MyBatis Plus足以解决,就懒得配置插件了. MyBatis Plus的资料不算是太 ...

  8. 【慕课网实战】Spark Streaming实时流处理项目实战笔记十四之铭文升级版

    铭文一级: 第11章 Spark Streaming整合Flume&Kafka打造通用流处理基础 streaming.conf agent1.sources=avro-sourceagent1 ...

  9. shiro实战系列(十四)之配置

    Shiro 被设计成能够在任何环境下工作,从最简单的命令行应用程序到最大的的企业群集应用.由于环境的多样性,使得许多配置机制适用于它的配置. 一. 许多配置选项 Shiro的SecurityManag ...

  10. Java并发编程原理与实战二十四:简易数据库连接池

    public class MyDataSource { private static LinkedList<Connection> pool = new LinkedList<> ...

随机推荐

  1. 7.OAuth2

    1.近几天在学习OAuth2协议,实际开发中用的最多的就是授权码模式   2.OAuth2的授权码模式流程:首先是用户去访问资源服务器,服务器会给用户一个授权码:用户根据授权码去访问认证服务器,服务器 ...

  2. 2023年成都.NET线下技术沙龙活动即将到来!

    MASA技术团队联合成都.NET俱乐部,将在成都市举办一场.NET线下技术沙龙,为.NET开发者创造一次交流学习的契机,我们邀请到的几位技术大咖,将会围绕各自的主题向大家分享他们的技术心得. 本场沙龙 ...

  3. 【Zookeeper】(三)部署与使用、服务器节点动态上下线案例分析

    目录 Zookeeper部署与使用 1 分布式安装部署 配置服务器编号 增加zoo.cfg集群配置参数 2 启动集群服务器 3 启动集群客户端和命令 4 ️API的使用 引入依赖 创建客户端 创建节点 ...

  4. .NET Core反射获取带有自定义特性的类,通过依赖注入根据Attribute元数据信息调用对应的方法

    前言 前段时间有朋友问道一个这样的问题,.NET Core中如何通过Attribute的元数据信息来调用标记的对应方法.我第一时间想到的就是通过C#反射获取带有Custom Attribute标记的类 ...

  5. v-if与v-show

    v-if的特点 v-if:是真实的条件控制语句,每当我们满足条件的时候就会显示元素,不满足条件的时候不显示元素(不存在元素没有) v-if:有一套自己的条件控制语句v-if; v-else-if; v ...

  6. php 正则去掉<p>&nbsp;</p> 空格 &nbsp;

    $str=' <p> </p><p> </p><p> </p><p> </p><p>< ...

  7. 上传了ipa但在苹果App Store中没有看到构建版本的问题

    ​ AU上传ipa出现下图红框提示说明成功上传,但有时App Store后台没有出现构建版本,请查看下面详细说明! ​编辑 一.首先登录iTunes Connect 后台.查看ipa构建情况 http ...

  8. js中宏任务和微任务

    宏任务包括:<script>整体代码.setTimeout.setInterval.setImmediate.Ajax.DOM事件微任务:process.nextTick.Mutation ...

  9. 纯前端使用xlsx实现导出表格

    列表数据纯前端使用xlsx实现导出功能 基础写法 let filename = "资产导出.xlsx"; 定义导出数据 let data = [ ["第一列", ...

  10. 命令行编译和执行java代码

    虽然现在IDE很强大又很智能,但是平常随意写点练手的代码的时候,直接在命令行中使用vim和java命令更为方便快捷,可以做到无鼠标纯键盘的操作. 首先保证将java相关指令添加到了环境变量中: 1.编 ...