javascript - 使用客户端 JS 在相机上叠加

Question

在进行结核病测试以准确确定大小后，我正在尝试对某人的硬结（皮肤上大小不一的红点）进行图像分析。

目前，我使用 NodeJS 作为后端/Web 服务器，提供仪表板界面并将图像推送到 python 脚本，该脚本使用 OpenCV 获取最左边的对象和给定的参考尺寸参数，例如四分之一英寸的 0.955 英寸，并使用该比例来测量出其他检测到的物体，例如硬结。

我遇到的问题是没有正确检测到红点（硬结），但四分之一（参考对象）是。我做了一个糟糕的修复，在硬结周围画了一条线并重新运行程序，显然这一次它正确地识别出大小正确的硬结。

由于这不是关于图像分析的课程，而且我真的不知道进一步优化这个程序，所以我试图为用户提供一个界面来标记硬化，例如他们可以紧紧放置的可调整大小的圆圈围绕他们的硬化。

我还没有看到任何直接使用客户端 JS 上的 getUserMedia() 功能执行此操作的示例，并且想知道如何执行此操作或查看是否已经存在一些库来帮助解决此问题。另一种选择是让用户拍摄带有硬化和四分之一的照片，然后在仪表板上的下一步测试中，用户可以通过某种方式在他们的图像上绘制（在硬化周围画一个快速圆圈）。

我只看到了在画布上静态绘制东西的方法，没有动态调整大小并将对象拖到图像上。

感谢任何输入

编辑： 这是一个示例图像。

这是当前的代码：

    from __future__ import print_function
    from scipy.spatial import distance as dist
    from imutils import perspective
    from imutils import contours
    #from mysql.connector import errorcode
    from datetime import date, datetime, timedelta
    import numpy as np
    import argparse
    import imutils
    import cv2
    #import mysql.connector
    import os
        # construct the argument parse and parse the arguments
        ap = argparse.ArgumentParser()
        ap.add_argument("-i", "--image", required=True,
            help="path to the input image")
        ap.add_argument("-w", "--width", type=float, required=True,
            help="width of the left-most object in the image (in inches)")
        ap.add_argument("-u", "--user", required=True,
            help="Username of ")
        args = vars(ap.parse_args())



    # load the image, convert it to grayscale, and blur it slightly
    image = cv2.imread(args["image"])
    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
    gray = cv2.GaussianBlur(gray, (7, 7), 0)

    # perform edge detection, then perform a dilation + erosion to
    # close gaps in between object edges
    edged = cv2.Canny(gray, 50, 100)
    edged = cv2.dilate(edged, None, iterations=1)
    edged = cv2.erode(edged, None, iterations=1)

    # find contours in the edge map
    cnts = cv2.findContours(edged.copy(), cv2.RETR_EXTERNAL,
        cv2.CHAIN_APPROX_SIMPLE)
    cnts = imutils.grab_contours(cnts)

    # sort the contours from left-to-right and initialize the
    # 'pixels per metric' calibration variable
    (cnts, _) = contours.sort_contours(cnts)
    pixelsPerMetric = None
    countourCount = 0
    # loop over the contours individually
    for c in cnts:


        # if the contour is not sufficiently large, ignore it
        if cv2.contourArea(c) < 200:
            continue
        countourCount=countourCount+1
        print(countourCount)
        if countourCount == 1:
            print('This is the scaling reference, should be: '+ str(args["width"]))
        # compute the rotated bounding box of the contour
        orig = image.copy()
        box = cv2.minAreaRect(c)
        box = cv2.cv.BoxPoints(box) if imutils.is_cv2() else cv2.boxPoints(box)
        box = np.array(box, dtype="int")

        # order the points in the contour such that they appear
        # in top-left, top-right, bottom-right, and bottom-left
        # order, then draw the outline of the rotated bounding
        # box
        box = perspective.order_points(box)
        cv2.drawContours(orig, [box.astype("int")], -1, (0, 255, 0), 2)

        # loop over the original points and draw them
        for (x, y) in box:
            cv2.circle(orig, (int(x), int(y)), 5, (0, 0, 255), -1)

        # unpack the ordered bounding box, then compute the midpoint
        # between the top-left and top-right coordinates, followed by
        # the midpoint between bottom-left and bottom-right coordinates
        (tl, tr, br, bl) = box
        print(box)
        (tltrX, tltrY) = midpoint(tl, tr)
        (blbrX, blbrY) = midpoint(bl, br)

        # compute the midpoint between the top-left and bottom-left points,
        # followed by the midpoint between the top-righ and bottom-right
        (tlblX, tlblY) = midpoint(tl, bl)
        (trbrX, trbrY) = midpoint(tr, br)

        # draw the midpoints on the image
        cv2.circle(orig, (int(tltrX), int(tltrY)), 5, (255, 0, 0), -1)
        cv2.circle(orig, (int(blbrX), int(blbrY)), 5, (255, 0, 0), -1)
        cv2.circle(orig, (int(tlblX), int(tlblY)), 5, (255, 0, 0), -1)
        cv2.circle(orig, (int(trbrX), int(trbrY)), 5, (255, 0, 0), -1)

        # draw lines between the midpoints
        cv2.line(orig, (int(tltrX), int(tltrY)), (int(blbrX), int(blbrY)),
            (255, 0, 255), 2)
        cv2.line(orig, (int(tlblX), int(tlblY)), (int(trbrX), int(trbrY)),
            (255, 0, 255), 2)

        # compute the Euclidean distance between the midpoints
        dA = dist.euclidean((tltrX, tltrY), (blbrX, blbrY))
        dB = dist.euclidean((tlblX, tlblY), (trbrX, trbrY))

        # if the pixels per metric has not been initialized, then
        # compute it as the ratio of pixels to supplied metric
        # (in this case, inches)
        if pixelsPerMetric is None:
            pixelsPerMetric = dB / args["width"]

        # compute the size of the object
        dimA = dA / pixelsPerMetric
        dimB = dB / pixelsPerMetric

        # draw the object sizes on the image
        cv2.putText(orig, "{:.1f}in".format(dimA),
            (int(tltrX - 15), int(tltrY - 10)), cv2.FONT_HERSHEY_SIMPLEX,
            0.65, (255, 255, 255), 2)
        cv2.putText(orig, "{:.1f}in".format(dimB),
            (int(trbrX + 10), int(trbrY)), cv2.FONT_HERSHEY_SIMPLEX,
            0.65, (255, 255, 255), 2)

        # show the output image
        cv2.imshow("Image", orig)


        cv2.imwrite(os.path.join('/Users/Ooga/Desktop/Skin-Analyzer/pythonServer/components/'+str(args["user"]) , 'component'+str(countourCount)+'.jpg'), orig)
        cv2.waitKey(0)

    # Make sure data is committed to the database
    #   cnx.commit()

标签： javascriptnode.jsopencv