|
| 1 | +import * as gesture from '@paddlejs-models/gesture'; |
| 2 | + |
| 3 | +const $uploadImg = document.getElementById('uploadImg') as HTMLInputElement; |
| 4 | +const $img = document.getElementById('image') as HTMLImageElement; |
| 5 | +const $txt = document.getElementById('txt'); |
| 6 | + |
| 7 | +async function load() { |
| 8 | + await gesture.load(); |
| 9 | + document.getElementById('isLoading').style.display = 'none'; |
| 10 | +} |
| 11 | + |
| 12 | +async function run(input: HTMLImageElement) { |
| 13 | + const res = await gesture.classify(input); |
| 14 | + let text = '未识别到手'; |
| 15 | + if (res.box && res.box.length) { |
| 16 | + text = res.type; |
| 17 | + calculateBox(input, res.box); |
| 18 | + } |
| 19 | + $txt.innerText = text; |
| 20 | +} |
| 21 | + |
| 22 | +function calculateBox(img, box) { |
| 23 | + let offsetX = 0; |
| 24 | + let offsetY = 0; |
| 25 | + |
| 26 | + if (img.width < img.height) { |
| 27 | + offsetX = img.height - img.width; |
| 28 | + } |
| 29 | + |
| 30 | + if (img.width > img.height) { |
| 31 | + offsetY = img.width - img.height; |
| 32 | + } |
| 33 | + |
| 34 | + const $canvas = document.getElementById('canvas') as HTMLCanvasElement; |
| 35 | + const widthRatio = (img.width + offsetX) / 256; |
| 36 | + const heightRatio = (img.height + offsetY) / 256; |
| 37 | + const point = []; |
| 38 | + |
| 39 | + box.forEach(item => { |
| 40 | + const tmpPonit = []; |
| 41 | + tmpPonit[0] = item[0] * widthRatio - offsetX / 2; |
| 42 | + tmpPonit[1] = item[1] * heightRatio - offsetY / 2; |
| 43 | + point.push(tmpPonit); |
| 44 | + }); |
| 45 | + $canvas.width = img.width; |
| 46 | + $canvas.height = img.height; |
| 47 | + const ctx = $canvas.getContext('2d'); |
| 48 | + // 开始一个新的绘制路径 |
| 49 | + ctx.beginPath(); |
| 50 | + ctx.drawImage(img, 0, 0, $canvas.width, $canvas.height); |
| 51 | + // 设置线条颜色为蓝色 |
| 52 | + ctx.strokeStyle = 'blue'; |
| 53 | + // 设置路径起点坐标 |
| 54 | + ctx.moveTo(point[0][0], point[0][1]); |
| 55 | + ctx.lineTo(point[1][0], point[1][1]); |
| 56 | + ctx.lineTo(point[2][0], point[2][1]); |
| 57 | + ctx.lineTo(point[3][0], point[3][1]); |
| 58 | + ctx.closePath(); |
| 59 | + ctx.stroke(); |
| 60 | +} |
| 61 | + |
| 62 | +load(); |
| 63 | + |
| 64 | +$uploadImg.onchange = (e: Event) => { |
| 65 | + const reader = new FileReader(); |
| 66 | + reader.onload = () => { |
| 67 | + $img.src = URL.createObjectURL((e.target as HTMLInputElement).files[0]); |
| 68 | + $img.onload = () => { |
| 69 | + run($img); |
| 70 | + }; |
| 71 | + }; |
| 72 | + reader.readAsDataURL((e.target as HTMLInputElement).files[0]); |
| 73 | +}; |
0 commit comments