From da7681e6e32b665526ce2b688d6a76111a96c084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=9D=B0?= Date: Mon, 8 Sep 2025 12:13:14 +0800 Subject: [PATCH] fix: rang drag problem & opt picture compress --- src/components/Range/index.tsx | 11 ++- src/components/UploadCover/index.tsx | 6 +- src/components/UploadCover/upload-from-wx.tsx | 98 +++++++++++++++++-- src/pages/detail/index.tsx | 4 +- 4 files changed, 104 insertions(+), 15 deletions(-) diff --git a/src/components/Range/index.tsx b/src/components/Range/index.tsx index 01c7b8c..53ae228 100644 --- a/src/components/Range/index.tsx +++ b/src/components/Range/index.tsx @@ -10,7 +10,10 @@ interface RangeProps { max?: number; step?: number; value?: [number, number]; - onChange?: (name: string, value: [number, number]) => void; + onChange?: { + (value: [number, number]): void + (name: string, value: [number, number]): void + }; disabled?: boolean; className?: string; name: string; @@ -41,7 +44,11 @@ const NtrpRange: React.FC = ({ const handleEndChange = (val: [number, number]) => { setCurrentValue(val); - onChange?.(name, val); + if (name) { + onChange?.(name, val); + } else { + onChange?.(val) + } }; const marks = useMemo(() => { diff --git a/src/components/UploadCover/index.tsx b/src/components/UploadCover/index.tsx index 6da8f37..06453a2 100644 --- a/src/components/UploadCover/index.tsx +++ b/src/components/UploadCover/index.tsx @@ -68,12 +68,12 @@ export default function UploadCover(props: UploadCoverProps) { setVisible(false) }, [value]) - const onWxAdd = useCallback((images: CoverImageValue[], onFileUploaded: Promise<{ id: string, data: uploadFileResponseData }[]>) => { + const onWxAdd = useCallback((images: CoverImageValue[], onFileUpdate: Promise<{ id: string, url: string }[]>) => { onAdd(images) - onFileUploaded.then(res => { + onFileUpdate.then(res => { onAdd(res.map(item => ({ id: item.id, - url: item.data.file_path, + url: item.url, }))) }) }, [onAdd]) diff --git a/src/components/UploadCover/upload-from-wx.tsx b/src/components/UploadCover/upload-from-wx.tsx index 33e23fe..6ac6e32 100644 --- a/src/components/UploadCover/upload-from-wx.tsx +++ b/src/components/UploadCover/upload-from-wx.tsx @@ -11,6 +11,80 @@ export interface UploadFromWxProps { maxCount: number } +async function convert_to_jpg_and_compress (src: string, { width, height }): Promise { + console.log(width, height, '13123132') + const canvas = Taro.createOffscreenCanvas({ type: '2d', width, height }) + console.log(canvas, canvas.width, canvas.height, 'canvas') + const ctx = canvas.getContext('2d') as CanvasRenderingContext2D + + const image = canvas.createImage() + await new Promise(resolve => { + image.onload = resolve + image.src = src + }) + ctx.clearRect(0, 0, width, height) + ctx.drawImage(image, 0, 0, width, height) + + const imageData = ctx.getImageData(0, 0, width, height) + console.log(imageData, 'imageData') + + return new Promise((resolve, reject) => { + Taro.canvasToTempFilePath({ + canvas, + fileType: 'jpg', + quality: 0.7, + success: res => resolve(res.tempFilePath), + fail: reject + }) + }) +} + + +async function compressImage(files) { + const res: string[] = [] + for (const file of files) { + console.log(file, file.width, file.height, 'file frfdfsfds') + const compressed_image = await convert_to_jpg_and_compress(file.path, { width: file.width, height: file.height }) + res.push(compressed_image) + } + return res +} +// 图片标准容器为 360 * 240 3:2 +// 压缩后图片最大宽高 +const IMAGE_MAX_SIZE = { + width: 1080, + height: 720, +} + +// 标准长宽比，判断标准 +const STANDARD_ASPECT_RATIO = IMAGE_MAX_SIZE.width / IMAGE_MAX_SIZE.height + +// 根据图片标准重新设置图片尺寸 +async function onChooseImageSuccess(tempFiles) { + console.log(tempFiles, 'tempFiles') + const result: { path: string, size: number, widht: number, height: number }[] = [] + for (const tempFile of tempFiles) { + console.count('tempFile') + const { width, height } = await Taro.getImageInfo({ src: tempFile.path }) + const image_aspect_ratio = width / height + let fileRes: { path: string, size: number } = { path: tempFile.path, size: tempFile.size } + // 如果图片长宽比小于标准长宽比，则依照图片高度以及图片最大高度来重新设置图片尺寸 + if (image_aspect_ratio < STANDARD_ASPECT_RATIO) { + fileRes = { + ...fileRes, + ...(height > IMAGE_MAX_SIZE.height ? { width: Math.floor(IMAGE_MAX_SIZE.height * image_aspect_ratio), height: IMAGE_MAX_SIZE.height } : { width: Math.floor(height * image_aspect_ratio), height }), + } + } else { + fileRes = { + ...fileRes, + ...(width > IMAGE_MAX_SIZE.width ? { width: IMAGE_MAX_SIZE.width, height: Math.floor(IMAGE_MAX_SIZE.width / image_aspect_ratio) } : { width, height: Math.floor(width / image_aspect_ratio) }), + } + } + result.push(fileRes) + } + return result +} + export default function UploadFromWx(props: UploadFromWxProps) { const { onAdd = () => void 0, @@ -22,21 +96,29 @@ export default function UploadFromWx(props: UploadFromWxProps) { sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], }).then(async (res) => { - // TODO: compress image - // TODO: cropping image to const size - let count = 0 - const files = res.tempFiles.map(item => ({ - filePath: item.path, + const analyzedFiles = await onChooseImageSuccess(res.tempFiles) + // compress image + // cropping image to standard size + const compressedTempFiles = await compressImage(analyzedFiles) + + let start = Date.now() + const files = compressedTempFiles.map(path => ({ + filePath: path, description: '封面图', tags: 'cover', is_public: 1 as unknown as 0 | 1, - id: (Date.now() + count++).toString(), + id: (start++).toString(), })) - const onFileUploaded = uploadApi.batchUpload(files) + const onFileUpdate = uploadApi.batchUpload(files).then(res => { + return res.map(item => ({ + id: item.id, + url: item.data.file_url + })) + }) onAdd(files.map(item => ({ id: item.id, url: item.filePath, - })), onFileUploaded) // TODO: add loading state + })), onFileUpdate) }) } return ( diff --git a/src/pages/detail/index.tsx b/src/pages/detail/index.tsx index 298968f..b242ad1 100644 --- a/src/pages/detail/index.tsx +++ b/src/pages/detail/index.tsx @@ -549,7 +549,7 @@ function Index() { } const fetchDetail = async () => { - const res = await DetailService.getDetail(243/* Number(id) */) + const res = await DetailService.getDetail(3387/* Number(id) */) if (res.code === 0) { setDetail(res.data) } @@ -561,7 +561,7 @@ function Index() { const handleJoinGame = () => { Taro.navigateTo({ - url: `/pages/orderCheck/index?gameId=${243/* id */}`, + url: `/pages/orderCheck/index?gameId=${3387/* id */}`, }) }