| | |
| | | return { longitude, latitude } |
| | | }) |
| | | } |
| | | |
| | | // 图片转带ai框的图片 |
| | | export function getAiImg(url, aiFrameSource) { |
| | | if (!url) return url |
| | | if (!aiFrameSource) return url |
| | | // let url = 'https://gimg3.baidu.com/search/src=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2Fportrait%2F165a01e1cd859d59133b7755623a6c29.png&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=r1,1&n=0&g=4&er=404&q=100&maxorilen2heic=2000000?sec=1780851600&t=d5ce5f611eafadd932b84ef14275fbda' |
| | | // const aiFrame1 = '[{"score":0.89990234375,"bbox":{"x_cen":195.5,"y_cen":326.5,"width":117.0,"height":265.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"},{"score":0.89306640625,"bbox":{"x_cen":1194.5,"y_cen":559.5,"width":115.0,"height":261.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"},{"score":0.88720703125,"bbox":{"x_cen":179.0,"y_cen":955.5,"width":124.0,"height":249.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"},{"score":0.88330078125,"bbox":{"x_cen":1198.5,"y_cen":260.5,"width":115.0,"height":285.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"},{"score":0.84716796875,"bbox":{"x_cen":204.5,"y_cen":71.5,"width":115.0,"height":143.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"},{"score":0.83203125,"bbox":{"x_cen":186.0,"y_cen":657.5,"width":114.0,"height":269.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"},{"score":0.78662109375,"bbox":{"x_cen":1205.5,"y_cen":49.5,"width":117.0,"height":99.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"}]' |
| | | const aiFrame = JSON.parse(aiFrameSource) |
| | | const img = new Image() |
| | | img.crossOrigin = 'anonymous' |
| | | return new Promise(resolve => { |
| | | img.onload = () => { |
| | | if (!img.naturalWidth || !img.naturalHeight) { |
| | | resolve('') |
| | | return |
| | | } |
| | | |
| | | const canvas = document.createElement('canvas') |
| | | const ctx = canvas.getContext('2d') |
| | | if (!ctx) { |
| | | resolve('') |
| | | return |
| | | } |
| | | |
| | | canvas.width = img.naturalWidth |
| | | canvas.height = img.naturalHeight |
| | | ctx.drawImage(img, 0, 0, canvas.width, canvas.height) |
| | | |
| | | aiFrame.forEach(item => { |
| | | let target = item |
| | | const { x_cen, y_cen, width, height } = target.bbox || {} |
| | | if ([x_cen, y_cen, width, height].some(value => typeof value !== 'number')) return |
| | | |
| | | const x = x_cen - width / 2 |
| | | const y = y_cen - height / 2 |
| | | const label = target.class_name || '' |
| | | const fontSize = Math.max(18, Math.round(canvas.width / 80)) |
| | | const labelHeight = fontSize + 10 |
| | | const labelY = y - labelHeight >= 0 ? y - labelHeight : y |
| | | |
| | | ctx.strokeStyle = '#FF3B30' |
| | | ctx.lineWidth = Math.max(3, Math.round(canvas.width / 640)) |
| | | ctx.strokeRect(x, y, width, height) |
| | | |
| | | if (label) { |
| | | ctx.font = `${fontSize}px Arial` |
| | | const labelWidth = ctx.measureText(label).width + 16 |
| | | ctx.fillStyle = '#FF3B30' |
| | | ctx.fillRect(x, labelY, labelWidth, labelHeight) |
| | | ctx.fillStyle = '#FFFFFF' |
| | | ctx.textBaseline = 'middle' |
| | | ctx.fillText(label, x + 8, labelY + labelHeight / 2) |
| | | } |
| | | }) |
| | | |
| | | try { |
| | | resolve(canvas.toDataURL('image/jpeg', 0.92)) |
| | | } catch (error) { |
| | | console.log(error) |
| | | resolve('') |
| | | } |
| | | } |
| | | img.onerror = () => resolve('') |
| | | img.src = url |
| | | }) |
| | | } |