console
var ctx = canvas.getContext("2d")
var loading = false
function doSubmit() {
if (loading) return
loading = true
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
if (fileField && fileField.files[0]) {
formData.append("file", fileField.files[0]);
}
fetch('https://ai-image.l904237461.workers.dev/', {
method: "POST",
body: formData,
}).then(r => {
loading = false
r.json().then(r => {
loading = false
file.value = ''
img1.src = "data:image/jpeg;base64," + r.inputs.image
img1.onload = function () {
canvas.width = img1.width
canvas.height = img1.height
ctx.drawImage(img1, 0, 0, img1.width, img1.height)
ctx.strokeStyle = "#FF0000"
ctx.lineWidth = 1
ctx.font = '16px Georgia'
ctx.fillStyle = 'red'
for (var i in r.response1) {
var v1 = r.response1[i]
if (v1.score < 0.8) {
continue
}
ctx.strokeRect(v1.box.xmin + 1, v1.box.ymin + 1, v1.box.xmax - 4 - v1.box.xmin + 1, v1.box.ymax - 4 - v1.box.ymin + 1)
ctx.fillText(v1.label, v1.box.xmin + 16, v1.box.ymin + 16)
}
}
})
}).catch(() => {
loading = false
file.value = ''
})
}
<div>
<input type="file" id="file" onchange="doSubmit()"/>
<button onclick="doSubmit()">刷新</button>
<br>
<canvas id="canvas" style="width: 100%"></canvas>
<br>
<img id="img1" style="position: absolute; top: -99999px;z-index: -100;"/>
</div>