javascript - 如何使用边界框裁剪图像

标签 javascript css crop amazon-rekognition

如何在使用 aws rekognition indexFaces api 返回的边界框渲染到浏览器时裁剪图像?下面是边界框示例

 Face: {
   BoundingBox: {
    Height: 0.16555599868297577, 
    Left: 0.30963000655174255, 
    Top: 0.7066670060157776, 
    Width: 0.22074100375175476
   }, 
   Confidence: 100, 
   FaceId: "29a75abe-397b-5101-ba4f-706783b2246c", 
   ImageId: "147fdf82-7a71-52cf-819b-e786c7b9746e"
  }, 
  Similarity: 97.04154968261719 }

最佳答案

我也遇到过同样的问题。您必须对 BoundingBox 值执行一些计算。请注意响应的 OrientationCorrection 字段中返回的估计方向。这是这里的关键值。您必须从这些令人困惑的值中找到顶部左侧。这是提示:

如果 OrientationCorrection = ROTATE_0

Left = image.width*BoundingBox.Left
Top = image.height*BoundingBox.To

如果 OrientationCorrection = ROTATE_90

Left = image.height * (1 - (BoundingBox.Top + .BoundingBox.Height))
Top = image.width * BoundingBox.Left

如果 OrientationCorrection = ROTATE_180

Left = image.width - (image.width*(BoundingBox.Left + BoundingBox.Width))
Top = image.height * (1 - (BoundingBox.Top + BoundingBox.Height))

如果 OrientationCorrection = ROTATE_270

Left = image.height * BoundingBox.top
Top = image.width * (1 - BoundingBox.Left - BoundingBox.Width)

这是我使用过的Python示例代码。

import boto3
import io
from PIL import Image

# Calculate positions from from estimated rotation 
def ShowBoundingBoxPositions(imageHeight, imageWidth, box, rotation): 
    left = 0
    top = 0

    if rotation == 'ROTATE_0':
        left = imageWidth * box['Left']
        top = imageHeight * box['Top']

    if rotation == 'ROTATE_90':
        left = imageHeight * (1 - (box['Top'] + box['Height']))
        top = imageWidth * box['Left']

    if rotation == 'ROTATE_180':
        left = imageWidth - (imageWidth * (box['Left'] + box['Width']))
        top = imageHeight * (1 - (box['Top'] + box['Height']))

    if rotation == 'ROTATE_270':
        left = imageHeight * box['Top']
        top = imageWidth * (1- box['Left'] - box['Width'] )

    print('Left: ' + '{0:.0f}'.format(left))
    print('Top: ' + '{0:.0f}'.format(top))
    print('Face Width: ' + "{0:.0f}".format(imageWidth * box['Width']))
    print('Face Height: ' + "{0:.0f}".format(imageHeight * box['Height']))


if __name__ == "__main__":

    photo='input.png'
    client=boto3.client('rekognition')


    #Get image width and height
    image = Image.open(open(photo,'rb'))
    width, height = image.size

    print ('Image information: ')
    print (photo)
    print ('Image Height: ' + str(height)) 
    print('Image Width: ' + str(width))    


    # call detect faces and show face age and placement
    # if found, preserve exif info
    stream = io.BytesIO()
    if 'exif' in image.info:
        exif=image.info['exif']
        image.save(stream,format=image.format, exif=exif)
    else:
        image.save(stream, format=image.format)    
    image_binary = stream.getvalue()

    response = client.detect_faces(Image={'Bytes': image_binary}, Attributes=['ALL'])

    print('Detected faces for ' + photo)    
    for faceDetail in response['FaceDetails']:
        print ('Face:')
        if 'OrientationCorrection'  in response:
            print('Orientation: ' + response['OrientationCorrection'])
            ShowBoundingBoxPositions(height, width, faceDetail['BoundingBox'], response['OrientationCorrection'])

        else:
            print ('No estimated orientation. Check Exif data')

        print('The detected face is estimated to be between ' + str(faceDetail['AgeRange']['Low']) 
            + ' and ' + str(faceDetail['AgeRange']['High']) + ' years')
        print()

它将返回图像中脸部的顶部左侧高度宽度。如果你使用 python,那么你可以像这样使用 PIL 轻松裁剪图像。

from PIL import Image
image = Image.open(open("Main_Image", 'rb'))
area = (Left, Top, Left + Width, Top + Height)
face = image.crop(area)
face.show()

它将显示图像中裁剪后的脸部。
快乐编码

关于javascript - 如何使用边界框裁剪图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45211033/

相关文章:

html - div 内的文本框不会对任何边距或填充更改使用react

html - 在固定的 div 中相对定位 div?

linux - 将 Canvas 大小裁剪为透明 png 文件中可见图像大小的脚本

javascript - 如何根据另一个元素的宽度设置一个元素的宽度?

javascript - 如何在 JavaScript 中迭代(键、值)?

javascript - jquery 中的子 li 选择未选择 li 父元素

iphone - 使用 BJImageCropper 在 iOS 中裁剪图像

javascript - 如何从Node.JS正确执行到Oracle数据库的sql语句?

javascript - jquery:来自 php 的数组从未定义

Android [opencv]裁剪板