<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2"></script>
<!-- Load BodyPix -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script>
</head>
<body>
<img
id="image"
src="data:image/image.jpg"
/>
<canvas id="canvas"/>
<script>
const img = document.getElementById("image");
function loadAndPredict() {
bodyPix.load()
.then((net)=> net.segmentPersonParts(img))
.then(partSegmentation => {
const coloredPartImage = bodyPix.toColoredPartMask(partSegmentation);
const opacity = 0.7;
const flipHorizontal = false;
const maskBlurAmount = 0;
const pixelCellWidth = 10.0;
const canvas = document.getElementById('canvas');
// Draw the pixelated colored part image on top of the original image onto a
// canvas. Each pixel cell's width will be set to 10 px. The pixelated colored
// part image will be drawn semi-transparent, with an opacity of 0.7, allowing
// for the original image to be visible under.
bodyPix.drawPixelatedMask(
canvas, img, coloredPartImage, opacity, maskBlurAmount,
flipHorizontal, pixelCellWidth);
});
}
loadAndPredict();
</script>
</body>
</html>
[ML] Tensorflow.js + Image segmentPerson的相关教程结束。
