吉安感知网项目-前端
chenyao
2026-06-30 4b3c357f2fa24a27eac3fe59cbf64e34255ab212
packages/utils/common/index.js
@@ -73,3 +73,69 @@
         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
   })
}