Skip to content

Commit 256ee65

Browse files
justadudewhohacksjustadudewhohacks
committed
merge drawing-api into branch
2 parents e908bbd + 9ca0e1b commit 256ee65

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+409
-402
lines changed

‎.travis.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
sudo: required
22
language: node_js
33
node_js:
4-
- "node"
4+
#- "node"
5+
- "11"
56
- "10"
67
- "8"
78
# node 6 is not compatible with tfjs-node

‎examples/examples-browser/public/js/drawing.js

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎examples/examples-browser/views/batchFaceLandmarks.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
function drawLandmarkCanvas(img, landmarks) {
6666
const canvas = faceapi.createCanvasFromMedia(img)
6767
$('#faceContainer').append(canvas)
68-
faceapi.drawLandmarks(canvas, landmarks, { lineWidth: 2 , drawLines: true })
68+
new faceapi.draw.DrawFaceLandmarks(landmarks).draw(canvas)
6969
}
7070

7171
async function runLandmarkDetection(useBatchInput) {

‎examples/examples-browser/views/batchFaceRecognition.html

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,10 @@
6868
$('#faceContainer').append(canvas)
6969

7070
const x = 20, y = canvas.height - 20
71-
faceapi.drawText(
72-
canvas.getContext('2d'),
73-
x,
74-
y,
75-
faceMatcher.findBestMatch(descriptor).toString(),
76-
Object.assign(faceapi.getDefaultDrawOptions(), { color: 'red', fontSize: 16 })
77-
)
71+
const ctx = faceapi.getContext2dOrThrow(canvas)
72+
ctx.font = '16px Georgia'
73+
ctx.fillStyle = 'red'
74+
ctx.fillText(faceMatcher.findBestMatch(descriptor).toString(), x, y)
7875
}
7976

8077
async function runComputeFaceDescriptors(useBatchInput) {

‎examples/examples-browser/views/bbtFaceLandmarkDetection.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,12 @@
4343
const canvas = faceapi.createCanvasFromMedia(currentImg)
4444
$('#faceContainer').empty()
4545
$('#faceContainer').append(canvas)
46-
faceapi.drawLandmarks(canvas, landmarks, { lineWidth: drawLines ? 2 : 4, drawLines })
46+
new faceapi.draw.DrawFaceLandmarks(landmarks, { drawLines }).draw(canvas)
4747
}
4848

4949
async function onSelectionChanged(uri) {
5050
currentImg = await faceapi.fetchImage(uri)
51-
landmarks = await faceapi.detectLandmarks(currentImg)
51+
landmarks = await faceapi.detectFaceLandmarks(currentImg)
5252
redraw()
5353
}
5454

‎examples/examples-browser/views/bbtFaceRecognition.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<script src="js/imageSelectionControls.js"></script>
98
<script src="js/bbt.js"></script>
@@ -159,17 +158,19 @@
159158

160159
function drawFaceRecognitionResults(results) {
161160
const canvas = $('#overlay').get(0)
161+
const inputImgEl = $('#inputImg').get(0)
162+
163+
faceapi.matchDimensions(canvas, inputImgEl)
162164
// resize detection and landmarks in case displayed image is smaller than
163165
// original size
164-
resizedResults = resizeCanvasAndResults($('#inputImg').get(0), canvas, results)
165-
166-
const boxesWithText = resizedResults.map(({ detection, descriptor }) =>
167-
new faceapi.BoxWithText(
168-
detection.box,
169-
faceMatcher.findBestMatch(descriptor).toString()
170-
)
171-
)
172-
faceapi.drawDetection(canvas, boxesWithText)
166+
const resizedResults = faceapi.resizeResults(results, inputImgEl)
167+
168+
resizedResults.forEach(({ detection, descriptor }) => {
169+
const label = faceMatcher.findBestMatch(descriptor).toString()
170+
const options = { label }
171+
const drawBox = new faceapi.draw.DrawBox(detection.box, options)
172+
drawBox.draw(canvas)
173+
})
173174
}
174175

175176
async function run() {

‎examples/examples-browser/views/faceDetection.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<script src="js/imageSelectionControls.js"></script>
98
<link rel="stylesheet" href="styles.css">
@@ -148,7 +147,9 @@
148147

149148
const results = await faceapi.detectAllFaces(inputImgEl, options)
150149

151-
drawDetections(inputImgEl, $('#overlay').get(0), results)
150+
const canvas = $('#overlay').get(0)
151+
faceapi.matchDimensions(canvas, inputImgEl)
152+
faceapi.draw.drawDetections(canvas, faceapi.resizeResults(results, inputImgEl))
152153
}
153154

154155
async function run() {

‎examples/examples-browser/views/faceExpressionRecognition.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<script src="js/imageSelectionControls.js"></script>
98
<link rel="stylesheet" href="styles.css">
@@ -150,7 +149,14 @@
150149
const options = getFaceDetectorOptions()
151150

152151
const results = await faceapi.detectAllFaces(inputImgEl, options).withFaceExpressions()
153-
drawExpressions(inputImgEl, $('#overlay').get(0), results, thresh, true)
152+
153+
const canvas = $('#overlay').get(0)
154+
faceapi.matchDimensions(canvas, inputImgEl)
155+
156+
const resizedResults = faceapi.resizeResults(results, inputImgEl)
157+
const minConfidence = 0.05
158+
faceapi.draw.drawDetections(canvas, resizedResults)
159+
faceapi.draw.drawFaceExpressions(canvas, resizedResults, minConfidence)
154160
}
155161

156162
async function run() {

‎examples/examples-browser/views/faceExtraction.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,7 @@
150150

151151
function displayExtractedFaces(faceImages) {
152152
const canvas = $('#overlay').get(0)
153-
const { width, height } = $('#inputImg').get(0)
154-
canvas.width = width
155-
canvas.height = height
153+
faceapi.matchDimensions(canvas, $('#inputImg').get(0))
156154

157155
$('#facesContainer').empty()
158156
faceImages.forEach(canvas => $('#facesContainer').append(canvas))

‎examples/examples-browser/views/faceLandmarkDetection.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<script src="js/imageSelectionControls.js"></script>
98
<link rel="stylesheet" href="styles.css">
@@ -162,7 +161,14 @@
162161

163162
const results = await faceapi.detectAllFaces(inputImgEl, options).withFaceLandmarks()
164163

165-
drawLandmarks(inputImgEl, $('#overlay').get(0), results, withBoxes)
164+
const canvas = $('#overlay').get(0)
165+
faceapi.matchDimensions(canvas, inputImgEl)
166+
const resizedResults = faceapi.resizeResults(results, inputImgEl)
167+
168+
if (withBoxes) {
169+
faceapi.draw.drawDetections(canvas, resizedResults)
170+
}
171+
faceapi.draw.drawFaceLandmarks(canvas, resizedResults)
166172
}
167173

168174
async function run() {

0 commit comments

Comments
 (0)