QQs'Note
0%

Posted on Edited on

App Services

部署单页应用

appservices.PNG

Publish 内容为 Code， 将构建好的architects上传到服务器wwwroot目录
在App Services的通用设置（Configuration->General Settings）中设置startup command

1
pm2 serve /home/site/wwwroot --no-daemon --spa

Troubleshooting

Could not detect any platform in the source directory.

在App Services的应用设置（Configuration->Application Settings）中添加配置项
SCM_DO_BUILD_DURING_DEPLOYMENT = false

API Management

Posted on Edited on In

色温
色调
色相

HSB模型和RGB模型，CMYK模型

色相 饱和度 亮度 无法用于工程制造
红绿蓝 用于发光体 不适用于反光物体
青洋红黄黑 用于反光体配色

色彩校准

color correction matrix(CCM)

Posted on Edited on In

OpenCV是计算机视觉领域应用最广泛的开源工具包，基于C/C++，支持Linux/Windows/MacOS/Android/iOS，并提供了Python，Matlab和Java等语言的接口

  • core：核心模块，主要包含了OpenCV中最基本的结构（矩阵，点线和形状等），以及相关的基础运算/操作。
  • imgproc：图像处理模块，包含和图像相关的基础功能（滤波，梯度，改变大小等），以及一些衍生的高级功能（图像分割，直方图，形态分析和边缘/直线提取等）。
  • highgui：提供了用户界面和文件读取的基本函数，比如图像显示窗口的生成和控制，图像/视频文件的IO等。
    如果不考虑视频应用，以上三个就是最核心和常用的模块了。针对视频和一些特别的视觉应用，OpenCV也提供了强劲的支持：
  • video：用于视频分析的常用功能，比如光流法（Optical Flow）和目标跟踪等。
  • calib3d：三维重建，立体视觉和相机标定等的相关功能。
  • features2d：二维特征相关的功能，主要是一些不受专利保护的，商业友好的特征点检测和匹配等功能，比如ORB特征。
  • object：目标检测模块，包含级联分类和Latent SVM
  • ml：机器学习算法模块，包含一些视觉中最常用的传统机器学习算法。
  • flann：最近邻算法库，Fast Library for Approximate
  • Nearest Neighbors，用于在多维空间进行聚类和检索，经常和关键点匹配搭配使用。
  • gpu：包含了一些gpu加速的接口，底层的加速是CUDA实现。
  • photo：计算摄像学（Computational Photography）相关的接口，当然这只是个名字，其实只有图像修复和降噪而已。
  • stitching：图像拼接模块，有了它可以自己生成全景照片。
  • nonfree：受到专利保护的一些算法，其实就是SIFT和SURF。
  • contrib：一些实验性质的算法，考虑在未来版本中加入的。
  • legacy：字面是遗产，意思就是废弃的一些接口，保留是考虑到向下兼容。
  • ocl：利用OpenCL并行加速的一些接口。
  • superres：超分辨率模块，其实就是BTV-L1（Biliteral Total Variation – L1 regularization）算法
  • viz：基础的3D渲染模块，其实底层就是著名的3D工具包VTK（Visualization Toolkit）。

安装

1
pip install -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple opencv-python

读取显示图像

1
2
3
4
5
6
7
8
9
10
11
12
img = cv2.imread('singlemushroom.jpg', cv2.IMREAD_UNCHANGED)
cv2.imshow("origin image", img)

img_gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)

cv2.imshow("gray image", img_gray)

cv2.waitKey(0)
cv2.destroyAllWindows()

# 写入图像
cv2.imwrite("originImage.jpg", img)

缩放

1
result = cv2.resize(src, (200,100))

像素操作

1
2
3
4
5
#矩阵运算

#拷贝区域
ball=img[280:340,330:390]
img[273:333,100:160]=ball

通道

1
2
3
4
#通道顺序与R-G-B顺序相反
b,g,r=cv2.split(img)
#b=img[:,:,0]
img=cv2.merge(b,g,r)

阈值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#读取图片
src = cv2.imread('miao.jpg')

#灰度图像处理
GrayImage = cv2.cvtColor(src,cv2.COLOR_BGR2GRAY)

#二进制阈值化处理
r, b = cv2.threshold(GrayImage, 127, 255, cv2.THRESH_BINARY)
#THRESH_BINARY 超过阈值像素设为最大值 否则为0
#THRESH_BINARY_INV 超过阈值像素设为0 否则为最大值
#THRESH_TRUNC 大于阈值部分设为最大值 否则不变
#THRESH_TOZERO 大于阈值部分不变 否则设为0
#THRESH_TOZERO_INV 大于阈值部分设为0 否则不变
print(r)

#显示图像
cv2.imshow("src", src)
cv2.imshow("result", b)

自适应阈值 adapativeThreshold

1
adaptiveThreshold(src, maxValue, adaptiveMethod, thresholdType, blockSize, C[, dst])

  • maxValue 满足条件的最大值
  • adaptiveMethod 自适应方法 ADAPTIVE_THRESH_MEAN_C ADAPTIVE_THRESH_GAUSSIAN_C
    ADAPTIVE_THRESH_MEAN_C的计算方法是计算出领域的平均值再减去 C；ADAPTIVE_THRESH_GAUSSIAN_C的计算方法是计算出领域的高斯均值再减去C
  • thresholdType 阈值类型 THRESH_BINARY 或者 THRESH_BINARY_INV
  • blockSize 邻域大小 如 3，5，7
  • C 阈值偏移量
    1
    2
    3
    4
    thresh1 = cv2.adaptiveThreshold(gray_image, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 11, 2)
    thresh2 = cv2.adaptiveThreshold(gray_image, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 31, 3)
    thresh3 = cv2.adaptiveThreshold(gray_image, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 11, 2)
    thresh4 = cv2.adaptiveThreshold(gray_image, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 31, 3)

卷积和滤波

设想3*3矩阵 对中心位置像素值做卷积运算 其作用即一种平滑滤波

1
2
#高斯滤波
gaussianBlur = cv2.GaussianBlur(greyImg, (3,3), 0)

膨胀和腐蚀，开运算和闭运算

1
2
3
4
5
6
7
#腐蚀
kernel=np.ones((5,5),np.uint8)
erosion=cv2.erode(img,kernel,iterations=1) 
#iterations 为重复次数
#膨胀
kernel=np.ones((5,5),np.uint8)
dilate=cv2.dilate(img,kernel,iterations=1)

开为先腐蚀再膨胀 闭为先膨胀后腐蚀

边缘检测 canny

  • 去噪 噪声会影响该算法进行边缘检测的准确性
  • 计算每个点的梯度大小和方向 例如用一对Sobel算子作为卷积核对图像滤波
  • 抑制非边缘点 边缘点应该满足：±梯度方向上的局部最大值，因此将不满足条件的点归零
  • 用两个阈值条件筛选剩余的边缘‘条纹’ 
    1
    2

    edges = cv.Canny(blur, 50, 150, apertureSize)

    FindContour

    一种边缘提取方法
1
contours,_=cv2.findContours(img,RETR_TREE,cv2.CHAIN_APPROX_SIMPLE)
  • 参数1 二值图像
  • 参数2 轮廓返回模式（RETR_EXTERNAL: 表示只检测最外层轮廓；RETR_LIST: 提取所有轮廓，并放置在list中，检测的轮廓不建立等级关系； RETR_TREE: 提取所有轮廓并重新建立网状轮廓结构 ）
  • 参数3 遍历发现方法（CHAIN_APPROX_NONE：获取每个轮廓的每个像素，相邻的两个点的像素位置差不超过1；CHAIN_APPROX_SIMPLE：压缩水平方向，垂直方向，对角线方向的元素，值保留该方向的重点坐标，如果一个矩形轮廓只需4个点来保存轮廓信息 ）
    用findcontour去孔洞

drawContours

cv2.drawContours()

1
cv2.drawContours(image, contours, contourIdx, color, thickness=None, lineType=None, hierarchy=None, maxLevel=None, offset=None)

  • image 原图像
  • contours 轮廓集合 例如findContours获得的集合
  • contourIdx 指定绘制轮廓list中的哪条轮廓，如果是-1，则绘制其中的所有轮廓。
  • color 颜色
  • thickness 轮廓线的宽度，如果是-1（cv2.FILLED），则为填充模式。
    1

    外接矩形

    1
    2
    3
    x, y, w, h = cv2.boundingRect(contour)
    img = cv2.rectangle(img, (x, y), (x + w, y + h), (0, 255, 0), 1)
    cv2.imshow(img)

    区域质心位置

    1
    2
    mu = cv2.moments(contour, False)
    mc = [mu['m10']/mu['m00'], mu['m01']/mu['m00']]

    联通区域计数

    CSDN Blog:连通区域分析算法

floodFill填充孔洞

掩膜

或者叫蒙版 将感兴趣区域（Region of Interest, ROI）提取出来 掩盖其他区域.

1
2
3
4
5
h, w = gaussianBlur.shape
mask = np.zeros((h, w), np.uint8)
cv2.fillPoly(mask, [capContour], (255, 255, 255))
roi = cv2.bitwise_and(GrayImage, GrayImage, mask=mask)
cv2.imshow('roi', roi)

直方图

反映像素的值在图像中的分布，值范围分段，进行统计，值可以是亮度，或任意色彩通道的分量
直方图可以作为阈值分割的参数选择依据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import cv2  
import numpy as np
import matplotlib.pyplot as plt

#读取图像
src = cv2.imread('orign.bmp')

#绘制直方图
plt.hist(src.ravel(), bins=256, density=1, facecolor='green', alpha=0.75)
plt.xlabel("x")
plt.ylabel("y")
plt.show()

#显示原始图像
cv2.imshow("src", src)
cv2.waitKey(0)
cv2.destroyAllWindows()

  • src.ravel()将二维图像数据展成一维
  • BINS 分若干组
  • DENSITY 密度
  • FACECOLOR 直方图颜色
  • ALPHA

Posted on Edited on In

PIL（ Python Imaging Library）是 Python 的第三方图像处理库，由于其功能丰富，API 简洁易用，因此深受好评。由于 PIL 库更新缓慢，目前仅支持 Python 2.7 版本，这明显无法满足 Python3 版本的使用需求。于是一群 Python 社区的志愿者（主要贡献者：Alex Clark 和 Contributors）在 PIL 库的基础上开发了一个支持 Python3 版本的图像处理库，它就是 Pillow。

Pillow 提供了丰富的图像处理功能，可概括为两个方面：
图像归档
图像处理
图像归档，包括创建缩略图、生成预览图像、图像批量处理等；而图像处理，则包括调整图像大小、裁剪图像、像素点处理、添加滤镜、图像颜色处理等。

Pillow 库可以配合 Python GUI（图形用户界面）工具 Tkinter 一起使用。

Posted on Edited on

输入棋盘图片路径 棋盘角点数（横纵方格数减1）

1
2
3
4
5
6
7
8
def calibratePos(imgPath, w, h):
    chessboardImg = cv2.imread(imgPath)
    chessboardImg = cv2.cvtColor(chessboardImg, cv2.COLOR_BGR2GRAY)
    ret, chessboard = cv2.findChessboardCorners(chessboardImg, (w, h), None)
    cv2.drawChessboardCorners(chessboardImg, (w, h), chessboard, ret)
    # cv2.imwrite('calibrated_image.jpg', chessboardImg)
    cv2.imshow('calibrated image', chessboardImg)
    cv2.waitKey(0)

Posted on Edited on

vue的状态管理库
其核心是管理一个store(仓库) store保存变量的状态 组件引用store 查询状态
以commit mutation的方式更新状态

state

使用单一状态树，即app只用一个对象管理所有变量

mutation

1
store.commit('increment', payload)
1
2
3
4
5
6
7
8
9
10
const store = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state, payload) {
        state.count += payload
    }
  }
})

mutation的处理方法不能是异步的 对于异步的状态是无法追踪的

action

与mutation类似
分发action

1
store.dispatch('increment')

action通常传递一个mutation 其处理方法可以是异步的
1
2
3
4
5
6
7
actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

mapActions

ref

Posted on Edited on In

vtk.js widgets

vtk Widget是官方提供的常用小工具，如LineWidget、AngleWidget、PaitWidget等

vtk Widget架构遵循MVC，分为三个组件

  • vtkWidgetState (model)
  • vtkWidgetRepresentation (view)
  • vtkAbstractWidget (control)

下图示意调用widget的不同组件的通信关系

Widget 工厂

Widget 工厂用于组装Widget及其state、representations

构建vtkWidgetState
调用getWidgetForView 工厂new一个widget对象 将state赋给该对象 创建并设置representations即SetRepresentation

开发者应继承vtkAbstractWidgetFactory开发widget

与InteractorStyle相比

VTK的交互器样式（vtkInteractorStyle）通常只是控制相机以及提供一些简单的键盘和鼠标事件的交互技术。交互器样式在渲染场景中并没有一种表达形式，也就是说，在交互时我们看不见交互器样式到底是什么样子的，用户在使用这些交互器样式时，必须事先知道哪些键盘和鼠标事件是控制哪些操作的。FromCSDN: Widgets简介

vtkWidget同为vtkInteractorObserver子类，监听并响应交互器事件，又添加可视化的representation

开发Widgets

Developing Widgets
vtkWidgetManager 是管理widgets创建、抑制(suppression)及聚焦(focus)的对象，每个render中唯一

1
2
3
4
5
6
7
8
widget = vtkWidget.newInstance()
handle = widgetManager.addWidget(widget, viewType)
widgetManager.setRenderer(renderer)
widgetManager.grabFocus(widget)
widgetManager.enablePicking()

widgetManager.removeWidget(widget)
widget.delete()

focus至多一个widget 激活并使能其响应事件（其实behaviour也可以在unfocus的状态下响应）

使用widget的newInstance方法创建widget对象 这时widget state被创建 用于在不同组件间同步状态 比如工具栏和canvas的相互交互

viewType用于指示widget manager该使用的representation。

创建子状态

1
2
3
4
5
6
7
8
9
10
11
12
vtkStateBuilder
.createBuilder()
.addStateFromMixin({
    labels: ['{LABEL0}'],
    mixins: ['origin', 'color', 'scale1', 'visible'],
    name: '{NAME}',
    initialValues: {
      scale1: 0.1,
      origin: [1, 2, 3],
      visible: false,
    }
})

  • name是子状态唯一标识 调用state.get{NAME}()从widget state中读取子状态
  • labels决定哪些representation可以用来渲染该子状态
  • mixins存放子状态有效数据 representation会使用到这些数据 因而是有限且标准的 get/set方法：subState.get{NAME}(), subState.set{NAME}() 修改子状态触发场景渲染
  • initialValues子状态初始值 非必须的

动态子状态
Mixins

调用widgetManager.getRepresentationsForViewType(viewType)返回含representation的集合 参数viewType是addWidget时指定的参数
返回各项 {builder, labels} 前者是Representation类 后者是representation对象要用到的子状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
switch (viewType) {
  case ViewTypes.DEFAULT:
  case ViewTypes.GEOMETRY:
  case ViewTypes.SLICE:
    return [
      {
        builder: vtkCircleContextRepresentation,
        labels: ['handle', 'trail'],
      },
      {
        builder: vtkPolyLineRepresentation,
        labels: ['trail'],
      },
    ];
  case ViewTypes.VOLUME:
    return [
        {
            builder: vtkSphereHandleRepresentation,
            labels: ['handles'],
            initialValues: {
              scaleInPixels: true,
            },
          },
          {
            builder: vtkSphereHandleRepresentation,
            labels: ['moveHandle'],
            initialValues: {
              scaleInPixels: true,
            },
          },
          {
            builder: vtkSVGCircleHandleRepresentation,
            labels: ['handles', 'moveHandle'],
          }
    ];
  default:
    return [{ builder: vtkSphereHandleRepresentation, labels: ['handle'] }];
}

Representation托管自身actors和mappers, actor在Representation创建时创建，推入model.actors中进而渲染
Representation应继承vtkHandleRepresentation 或 vtkContextRepresentation

Widget behavior
widgetManager.addWidget返回的handle就是widget behavior对象 它控制这widget的行为：接收并响应鼠标、键盘事件 见其定义的方法形如 PublicAPI.handle{XXX}(callData)
widget behavior也可以访问renderer rendererWindow 和 interactor

Posted on Edited on

provider & inject

类似于React的 Context Provider, 避免父组件向孙子后代组件传参时逐层引用，而以依赖注入的形式暴露给其他组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const app = Vue.createApp({})

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 模板的其余部分 -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > 注入的 property: John Doe
  }
})

注意 provide 组件实例property，需要用返回函数的形式
1
2
3
4
5
provide() {
    return {
        todoLength: this.todos.length
    }
}