feat: pc端缩略图

罗广辉

10 hours ago ba081132ddc61d29766c7d87789e64ef27e4ee80

feat: pc端缩略图

 applications/mobile-web-view/src/appPages/work/workDetail/index.vue

@@ -76,9 +76,8 @@
<script setup>
import { getSharingDetailsApi } from '@/api/work/index'
import { showToast, showNotify, showImagePreview } from 'vant'
import { getShowImg, getSmallImg } from '@/utils/util'
import { useRoute, useRouter } from 'vue-router'
import { getAiImg, replaceWithProxy } from '@ztzf/utils'
import { drawAiFrame, replaceWithProxy } from '@ztzf/utils'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
const keyword = ref('')
@@ -184,7 +183,7 @@
        // http://220.177.172.27:8100 改为 https://wrj.shuixiongit.com/ja-proxy
        eventImageUrl = replaceWithProxy(eventImageUrl)
        if (eventImageUrl) {
            mediaSrc.value = !isVideoAttachment.value && geojson ? await getAiImg(eventImageUrl, geojson) : eventImageUrl
            mediaSrc.value = !isVideoAttachment.value && geojson ? await drawAiFrame(eventImageUrl, geojson) : eventImageUrl
        }
    } catch (error) {
        showToast('分享链接失效')

 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 ''
    }
}