wasm: updated faceblur demo

This commit is contained in:
esimov
2022-05-03 10:52:37 +03:00
parent a77d2f9f4c
commit 4bf38e072f
4 changed files with 65 additions and 468 deletions

View File

@@ -4,10 +4,13 @@ import (
"fmt"
"image"
"image/color"
"image/draw"
"math"
"syscall/js"
"github.com/esimov/pigo-wasm-demos/detector"
ellipse "github.com/esimov/pigo-wasm-demos/draw"
"github.com/esimov/stackblur-go"
)
// Canvas struct holds the Javascript objects needed for the Canvas creation
@@ -47,7 +50,7 @@ const (
maxBlurRadius = 50
)
var det *detector.Detector
var pigo *detector.Detector
// NewCanvas creates and initializes the new Canvas element
func NewCanvas() *Canvas {
@@ -72,7 +75,7 @@ func NewCanvas() *Canvas {
c.blurRadius = 20
det = detector.NewDetector()
pigo = detector.NewDetector()
return &c
}
@@ -82,12 +85,12 @@ func (c *Canvas) Render() error {
var data = make([]byte, width*height*4)
c.done = make(chan struct{})
err := det.UnpackCascades()
err := pigo.UnpackCascades()
if err != nil {
return err
}
c.renderer = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
go func() {
go func() error {
c.window.Get("stats").Call("begin")
c.reqID = c.window.Call("requestAnimationFrame", c.renderer)
@@ -106,12 +109,15 @@ func (c *Canvas) Render() error {
// and the memory will keep up increasing by each iteration.
data = make([]byte, len(data))
res := det.DetectFaces(gray, height, width)
res := pigo.DetectFaces(gray, height, width)
if len(res) > 0 {
c.drawDetection(data, res)
if err := c.drawDetection(data, res); err != nil {
return err
}
}
c.window.Get("stats").Call("end")
return nil
}()
return nil
})
@@ -121,6 +127,7 @@ func (c *Canvas) Render() error {
c.window.Call("requestAnimationFrame", c.renderer)
c.detectKeyPress()
<-c.done
return nil
}
@@ -208,19 +215,14 @@ func (c *Canvas) pixToImage(pixels []uint8, dim int) image.Image {
c.frame = image.NewNRGBA(image.Rect(0, 0, dim, dim))
bounds := c.frame.Bounds()
dx, dy := bounds.Max.X, bounds.Max.Y
col := color.NRGBA{
R: uint8(0),
G: uint8(0),
B: uint8(0),
A: uint8(255),
}
col := color.NRGBA{}
for y := bounds.Min.Y; y < dy; y++ {
for x := bounds.Min.X; x < dx*4; x += 4 {
col.R = uint8(pixels[x+y*dx*4])
col.G = uint8(pixels[x+y*dx*4+1])
col.B = uint8(pixels[x+y*dx*4+2])
col.A = uint8(pixels[x+y*dx*4+3])
col.R = pixels[x+y*dx*4]
col.G = pixels[x+y*dx*4+1]
col.B = pixels[x+y*dx*4+2]
col.A = pixels[x+y*dx*4+3]
c.frame.SetNRGBA(y, int(x/4), col)
}
@@ -242,26 +244,25 @@ func (c *Canvas) imgToPix(img image.Image) []uint8 {
return pixels
}
// pixelateDetectedRegion pixelates the detected face region
func (c *Canvas) blurDetectedRegion(data []uint8, dets []int) []uint8 {
// Converts the array buffer to an image
img := c.pixToImage(data, int(float64(dets[2])*0.8))
// blurFace blures out the detected face region
func (c *Canvas) blurFace(src image.Image, scale int) (image.Image, error) {
img, err := stackblur.Process(src, c.blurRadius)
if err != nil {
return nil, err
}
blured := Blur(img, c.blurRadius)
return c.imgToPix(blured)
return img, nil
}
// drawDetection draws the detected faces and eyes.
func (c *Canvas) drawDetection(data []uint8, dets [][]int) {
for i := 0; i < len(dets); i++ {
if dets[i][3] > 50 {
func (c *Canvas) drawDetection(data []uint8, dets [][]int) error {
for i, det := range dets {
if det[3] > 50 {
c.ctx.Call("beginPath")
c.ctx.Set("lineWidth", 2)
c.ctx.Set("strokeStyle", "rgba(255, 0, 0, 0.5)")
row, col, scale := dets[i][1], dets[i][0], dets[i][2]
col = col + int(float64(col)*0.1)
scale = int(float64(scale) * 0.8)
row, col, scale := det[1], det[0], det[2]
if c.isBlured {
// Substract the image under the detected face region.
@@ -270,9 +271,36 @@ func (c *Canvas) drawDetection(data []uint8, dets [][]int) {
uint8Arr := js.Global().Get("Uint8Array").New(subimg)
js.CopyBytesToGo(imgData, uint8Arr)
buffer := c.blurDetectedRegion(imgData, dets[i])
unionMask := image.NewNRGBA(image.Rect(0, 0, scale, scale))
// Add to union mask
ellipse := &ellipse.Ellipse{
Cx: row,
Cy: col,
Ry: int(float64(scale) * 0.8 / 2.2),
Rx: int(float64(scale) * 0.8 / 1.55),
}
draw.Draw(unionMask, unionMask.Bounds(), ellipse, image.Point{X: row - scale/2, Y: col - scale/2}, draw.Over)
// Converts the buffer array to an image.
img := c.pixToImage(imgData, scale)
// Create a new image and draw the webcam frame captures into it.
newImg := image.NewNRGBA(image.Rect(0, 0, scale, scale))
draw.Draw(newImg, newImg.Bounds(), img, newImg.Bounds().Min, draw.Over)
// Apply the blur effect over the obtained pixel data converted to image.
blurred, err := c.blurFace(newImg, scale)
if err != nil {
return err
}
faceTemplate := image.NewNRGBA(image.Rect(0, 0, scale, scale))
draw.Draw(faceTemplate, img.Bounds(), blurred, image.Point{}, draw.Over)
// Draw the triangled image through the facemask and on top of the source.
draw.DrawMask(img.(draw.Image), img.Bounds(), faceTemplate, image.Point{}, unionMask, image.Point{}, draw.Over)
uint8Arr = js.Global().Get("Uint8Array").New(scale * scale * 4)
js.CopyBytesToJS(uint8Arr, buffer)
js.CopyBytesToJS(uint8Arr, c.imgToPix(img))
uint8Clamped := js.Global().Get("Uint8ClampedArray").New(uint8Arr)
rawData := js.Global().Get("ImageData").New(uint8Clamped, scale)
@@ -287,14 +315,14 @@ func (c *Canvas) drawDetection(data []uint8, dets [][]int) {
}
if c.showPupil {
leftPupil := det.DetectLeftPupil(dets[i])
leftPupil := pigo.DetectLeftPupil(dets[i])
if leftPupil != nil {
col, row, scale := leftPupil.Col, leftPupil.Row, leftPupil.Scale/8
c.ctx.Call("moveTo", col+int(scale), row)
c.ctx.Call("arc", col, row, scale, 0, 2*math.Pi, true)
}
rightPupil := det.DetectRightPupil(dets[i])
rightPupil := pigo.DetectRightPupil(dets[i])
if rightPupil != nil {
col, row, scale := rightPupil.Col, rightPupil.Row, rightPupil.Scale/8
c.ctx.Call("moveTo", col+int(scale), row)
@@ -304,6 +332,7 @@ func (c *Canvas) drawDetection(data []uint8, dets [][]int) {
}
}
}
return nil
}
// detectKeyPress listen for the keypress event and retrieves the key code.

View File

@@ -1,435 +0,0 @@
// Go implementation of the StackBlur algorithm
// http://incubator.quasimondo.com/processing/fast_blur_deluxe.php
package faceblur
import (
"image"
"image/color"
)
// blurStack is a linked list containing the color value and a pointer to the next struct.
type blurStack struct {
r, g, b, a uint32
next *blurStack
}
var mulTable = []uint32{
512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512,
454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512,
482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456,
437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512,
497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328,
320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456,
446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335,
329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512,
505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405,
399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328,
324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271,
268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456,
451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388,
385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335,
332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292,
289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259,
}
var shgTable = []uint32{
9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,
17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23,
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
}
// newBlurStack initialize the StackBlur algorithm by returning a new struct of type blurStack.
func (bs *blurStack) newBlurStack() *blurStack {
return &blurStack{bs.r, bs.g, bs.b, bs.a, bs.next}
}
// Blur takes an image as input and returns it's blurred version by applying the blur radius defined as parameter.
func Blur(src image.Image, radius uint32) image.Image {
var stackEnd, stackIn, stackOut *blurStack
var width, height = uint32(src.Bounds().Dx()), uint32(src.Bounds().Dy())
var (
div, widthMinus1, heightMinus1, radiusPlus1, sumFactor uint32
x, y, i, p, yp, yi, yw,
rSum, gSum, bSum, aSum,
rOutSum, gOutSum, bOutSum, aOutSum,
rInSum, gInSum, bInSum, aInSum,
pr, pg, pb, pa uint32
)
img := toNRGBA(src)
div = radius + radius + 1
widthMinus1 = width - 1
heightMinus1 = height - 1
radiusPlus1 = radius + 1
sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2
bs := blurStack{}
stackStart := bs.newBlurStack()
stack := stackStart
for i = 1; i < div; i++ {
stack.next = bs.newBlurStack()
stack = stack.next
if i == radiusPlus1 {
stackEnd = stack
}
}
stack.next = stackStart
mulSum := mulTable[radius]
shgSum := shgTable[radius]
for y = 0; y < height; y++ {
rInSum, gInSum, bInSum, aInSum, rSum, gSum, bSum, aSum = 0, 0, 0, 0, 0, 0, 0, 0
pr = uint32(img.Pix[yi])
pg = uint32(img.Pix[yi+1])
pb = uint32(img.Pix[yi+2])
pa = uint32(img.Pix[yi+3])
rOutSum = radiusPlus1 * pr
gOutSum = radiusPlus1 * pg
bOutSum = radiusPlus1 * pb
aOutSum = radiusPlus1 * pa
rSum += sumFactor * pr
gSum += sumFactor * pg
bSum += sumFactor * pb
aSum += sumFactor * pa
stack = stackStart
for i = 0; i < radiusPlus1; i++ {
stack.r = pr
stack.g = pg
stack.b = pb
stack.a = pa
stack = stack.next
}
for i = 1; i < radiusPlus1; i++ {
var diff uint32
if widthMinus1 < i {
diff = widthMinus1
} else {
diff = i
}
p = yi + (diff << 2)
pr = uint32(img.Pix[p])
pg = uint32(img.Pix[p+1])
pb = uint32(img.Pix[p+2])
pa = uint32(img.Pix[p+3])
stack.r = pr
stack.g = pg
stack.b = pb
stack.a = pa
rSum += stack.r * (radiusPlus1 - i)
gSum += stack.g * (radiusPlus1 - i)
bSum += stack.b * (radiusPlus1 - i)
aSum += stack.a * (radiusPlus1 - i)
rInSum += pr
gInSum += pg
bInSum += pb
aInSum += pa
stack = stack.next
}
stackIn = stackStart
stackOut = stackEnd
for x = 0; x < width; x++ {
pa = (aSum * mulSum) >> shgSum
img.Pix[yi+3] = uint8(pa)
if pa != 0 {
img.Pix[yi] = uint8((rSum * mulSum) >> shgSum)
img.Pix[yi+1] = uint8((gSum * mulSum) >> shgSum)
img.Pix[yi+2] = uint8((bSum * mulSum) >> shgSum)
} else {
img.Pix[yi] = 0
img.Pix[yi+1] = 0
img.Pix[yi+2] = 0
}
rSum -= rOutSum
gSum -= gOutSum
bSum -= bOutSum
aSum -= aOutSum
rOutSum -= stackIn.r
gOutSum -= stackIn.g
bOutSum -= stackIn.b
aOutSum -= stackIn.a
p = x + radius + 1
if p > widthMinus1 {
p = widthMinus1
}
p = (yw + p) << 2
stackIn.r = uint32(img.Pix[p])
stackIn.g = uint32(img.Pix[p+1])
stackIn.b = uint32(img.Pix[p+2])
stackIn.a = uint32(img.Pix[p+3])
rInSum += stackIn.r
gInSum += stackIn.g
bInSum += stackIn.b
aInSum += stackIn.a
rSum += rInSum
gSum += gInSum
bSum += bInSum
aSum += aInSum
stackIn = stackIn.next
pr = stackOut.r
pg = stackOut.g
pb = stackOut.b
pa = stackOut.a
rOutSum += pr
gOutSum += pg
bOutSum += pb
aOutSum += pa
rInSum -= pr
gInSum -= pg
bInSum -= pb
aInSum -= pa
stackOut = stackOut.next
yi += 4
}
yw += width
}
for x = 0; x < width; x++ {
rInSum, gInSum, bInSum, aInSum, rSum, gSum, bSum, aSum = 0, 0, 0, 0, 0, 0, 0, 0
yi = x << 2
pr = uint32(img.Pix[yi])
pg = uint32(img.Pix[yi+1])
pb = uint32(img.Pix[yi+2])
pa = uint32(img.Pix[yi+3])
rOutSum = radiusPlus1 * pr
gOutSum = radiusPlus1 * pg
bOutSum = radiusPlus1 * pb
aOutSum = radiusPlus1 * pa
rSum += sumFactor * pr
gSum += sumFactor * pg
bSum += sumFactor * pb
aSum += sumFactor * pa
stack = stackStart
for i = 0; i < radiusPlus1; i++ {
stack.r = pr
stack.g = pg
stack.b = pb
stack.a = pa
stack = stack.next
}
yp = width
for i = 1; i <= radius; i++ {
yi = (yp + x) << 2
pr = uint32(img.Pix[yi])
pg = uint32(img.Pix[yi+1])
pb = uint32(img.Pix[yi+2])
pa = uint32(img.Pix[yi+3])
stack.r = pr
stack.g = pg
stack.b = pb
stack.a = pa
rSum += stack.r * (radiusPlus1 - i)
gSum += stack.g * (radiusPlus1 - i)
bSum += stack.b * (radiusPlus1 - i)
aSum += stack.a * (radiusPlus1 - i)
rInSum += pr
gInSum += pg
bInSum += pb
aInSum += pa
stack = stack.next
if i < heightMinus1 {
yp += width
}
}
yi = x
stackIn = stackStart
stackOut = stackEnd
for y = 0; y < height; y++ {
p = yi << 2
pa = (aSum * mulSum) >> shgSum
img.Pix[p+3] = uint8(pa)
if pa > 0 {
img.Pix[p] = uint8((rSum * mulSum) >> shgSum)
img.Pix[p+1] = uint8((gSum * mulSum) >> shgSum)
img.Pix[p+2] = uint8((bSum * mulSum) >> shgSum)
} else {
img.Pix[p] = 0
img.Pix[p+1] = 0
img.Pix[p+2] = 0
}
rSum -= rOutSum
gSum -= gOutSum
bSum -= bOutSum
aSum -= aOutSum
rOutSum -= stackIn.r
gOutSum -= stackIn.g
bOutSum -= stackIn.b
aOutSum -= stackIn.a
p = y + radiusPlus1
if p > heightMinus1 {
p = heightMinus1
}
p = (x + (p * width)) << 2
stackIn.r = uint32(img.Pix[p])
stackIn.g = uint32(img.Pix[p+1])
stackIn.b = uint32(img.Pix[p+2])
stackIn.a = uint32(img.Pix[p+3])
rInSum += stackIn.r
gInSum += stackIn.g
bInSum += stackIn.b
aInSum += stackIn.a
rSum += rInSum
gSum += gInSum
bSum += bInSum
aSum += aInSum
stackIn = stackIn.next
pr = stackOut.r
pg = stackOut.g
pb = stackOut.b
pa = stackOut.a
rOutSum += pr
gOutSum += pg
bOutSum += pb
aOutSum += pa
rInSum -= pr
gInSum -= pg
bInSum -= pb
aInSum -= pa
stackOut = stackOut.next
yi += width
}
}
return img
}
// toNRGBA converts any image type to *image.NRGBA with min-point at (0, 0).
func toNRGBA(img image.Image) *image.NRGBA {
srcBounds := img.Bounds()
if srcBounds.Min.X == 0 && srcBounds.Min.Y == 0 {
if src0, ok := img.(*image.NRGBA); ok {
return src0
}
}
srcMinX := srcBounds.Min.X
srcMinY := srcBounds.Min.Y
dstBounds := srcBounds.Sub(srcBounds.Min)
dstW := dstBounds.Dx()
dstH := dstBounds.Dy()
dst := image.NewNRGBA(dstBounds)
switch src := img.(type) {
case *image.NRGBA:
rowSize := srcBounds.Dx() * 4
for dstY := 0; dstY < dstH; dstY++ {
di := dst.PixOffset(0, dstY)
si := src.PixOffset(srcMinX, srcMinY+dstY)
for dstX := 0; dstX < dstW; dstX++ {
copy(dst.Pix[di:di+rowSize], src.Pix[si:si+rowSize])
}
}
case *image.YCbCr:
for dstY := 0; dstY < dstH; dstY++ {
di := dst.PixOffset(0, dstY)
for dstX := 0; dstX < dstW; dstX++ {
srcX := srcMinX + dstX
srcY := srcMinY + dstY
siy := src.YOffset(srcX, srcY)
sic := src.COffset(srcX, srcY)
r, g, b := color.YCbCrToRGB(src.Y[siy], src.Cb[sic], src.Cr[sic])
dst.Pix[di+0] = r
dst.Pix[di+1] = g
dst.Pix[di+2] = b
dst.Pix[di+3] = 0xff
di += 4
}
}
case *image.Gray:
for dstY := 0; dstY < dstH; dstY++ {
di := dst.PixOffset(0, dstY)
si := src.PixOffset(srcMinX, srcMinY+dstY)
for dstX := 0; dstX < dstW; dstX++ {
c := src.Pix[si]
dst.Pix[di+0] = c
dst.Pix[di+1] = c
dst.Pix[di+2] = c
dst.Pix[di+3] = 0xff
di += 4
si += 2
}
}
default:
for dstY := 0; dstY < dstH; dstY++ {
di := dst.PixOffset(0, dstY)
for dstX := 0; dstX < dstW; dstX++ {
c := color.NRGBAModel.Convert(img.At(srcMinX+dstX, srcMinY+dstY)).(color.NRGBA)
dst.Pix[di+0] = c.R
dst.Pix[di+1] = c.G
dst.Pix[di+2] = c.B
dst.Pix[di+3] = c.A
di += 4
}
}
}
return dst
}

1
go.mod
View File

@@ -4,6 +4,7 @@ go 1.18
require (
github.com/esimov/pigo v1.4.5
github.com/esimov/stackblur-go v1.1.0
github.com/esimov/triangle v1.3.0
github.com/esimov/triangle/v2 v2.0.0
github.com/fogleman/gg v1.3.0

2
go.sum
View File

@@ -1,6 +1,8 @@
github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
github.com/esimov/pigo v1.4.5 h1:ySG0QqMh02VNALvHnx04L1ScRu66N6XA5vLLga8GiLg=
github.com/esimov/pigo v1.4.5/go.mod h1:SGkOUpm4wlEmQQJKlaymAkThY8/8iP+XE0gFo7g8G6w=
github.com/esimov/stackblur-go v1.1.0 h1:fwnZJC/7sHFzu4CDMgdJ1QxMN/q3k5MGILuoU4hH6oQ=
github.com/esimov/stackblur-go v1.1.0/go.mod h1:7PcTPCHHKStxbZvBkUlQJjRclqjnXtQ0NoORZt1AlHE=
github.com/esimov/triangle v1.3.0 h1:8637fdGbeNNoax1BuXFPc5+lTCvi/XWKW8FNuehCSC4=
github.com/esimov/triangle v1.3.0/go.mod h1:82lxRK5Bg56WTzWlp23OzXCIf1V5Q9O8Y2TcVpQ00eo=
github.com/esimov/triangle/v2 v2.0.0 h1:bUAfG42rcQeQYLvSnvwcerlts8z8z7r3FCvdBppfRcA=