From ba081132ddc61d29766c7d87789e64ef27e4ee80 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Tue, 11 Aug 2026 19:05:54 +0800
Subject: [PATCH] feat: pc端缩略图
---
packages/utils/common/index.js | 153 +++++++++++++++++++++++++++-----------------------
1 files changed, 82 insertions(+), 71 deletions(-)
diff --git a/packages/utils/common/index.js b/packages/utils/common/index.js
index 7a99934..97ff9a5 100644
--- a/packages/utils/common/index.js
+++ b/packages/utils/common/index.js
@@ -83,87 +83,98 @@
)
}
+// 加载图片并获取原始尺寸
+function loadImage(url) {
+ return new Promise((resolve, reject) => {
+ const image = new Image()
+ image.crossOrigin = 'anonymous'
+ image.onload = () => {
+ if (!image.naturalWidth || !image.naturalHeight) {
+ reject(new Error('图片尺寸无效'))
+ return
+ }
+ resolve(image)
+ }
+ image.onerror = () => reject(new Error('图片加载失败'))
+ image.src = url
+ })
+}
+
+// 在图片上绘制算法框
+function renderAiFrame(image, aiFrame, scaleX = 1, scaleY = 1) {
+ const canvas = document.createElement('canvas')
+ const ctx = canvas.getContext('2d')
+ if (!ctx) return ''
+
+ canvas.width = image.naturalWidth
+ canvas.height = image.naturalHeight
+ ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
+
+ aiFrame.forEach(item => {
+ const { x_cen, y_cen, width, height } = item.bbox || {}
+ if ([x_cen, y_cen, width, height].some(value => typeof value !== 'number')) return
+
+ const scaledWidth = width * scaleX
+ const scaledHeight = height * scaleY
+ const x = x_cen * scaleX - scaledWidth / 2
+ const y = y_cen * scaleY - scaledHeight / 2
+ const label = item.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, scaledWidth, scaledHeight)
+
+ 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 {
+ return canvas.toDataURL('image/jpeg', 0.92)
+ } catch {
+ return ''
+ }
+}
+
// 异步生成算法成果图片
export async function appendAiImages(item) {
try {
- const [resultUrl, thumbnail] = await Promise.all([
- getAiImg(replaceWithProxy(item.resultUrl), item.geojson),
- getAiImg(replaceWithProxy(item.thumbnail), item.geojson),
- ])
- console.log()
- if (item.id === '2019312870354416746'){
- console.log(resultUrl)
- console.log(thumbnail)
+ const aiFrame = JSON.parse(item.geojson)
+ const resultImagePromise = loadImage(item.resultUrl)
+ const thumbnailImagePromise = loadImage(item.thumbnail).catch(() => null)
+ const resultImage = await resultImagePromise
+ item.resultUrl = renderAiFrame(resultImage, aiFrame)
+ const thumbnailImage = await thumbnailImagePromise
+ if (!thumbnailImage) {
+ item.thumbnail = item.resultUrl
+ return
}
- item.resultUrl = resultUrl
- item.thumbnail = thumbnail
+ const scaleX = thumbnailImage.naturalWidth / resultImage.naturalWidth
+ const scaleY = thumbnailImage.naturalHeight / resultImage.naturalHeight
+ item.thumbnail = renderAiFrame(thumbnailImage, aiFrame, scaleX, scaleY)
} catch {
item.thumbnail = item.resultUrl
}
}
// 图片转带ai框的图片
-export function getAiImg(url, aiFrameSource) {
+export async function drawAiFrame(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
- })
+ try {
+ const aiFrame = JSON.parse(aiFrameSource)
+ const image = await loadImage(url)
+ return renderAiFrame(image, aiFrame)
+ } catch {
+ return ''
+ }
}
--
Gitblit v1.9.3