fix: rang drag problem & opt picture compress

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<RangeProps> = ({
 
   const handleEndChange = (val: [number, number]) => {
     setCurrentValue(val);
-    onChange?.(name, val);
+    if (name) {
+      onChange?.(name, val);
+    } else {
+      onChange?.(val)
+    }
   };
 
   const marks = useMemo(() => {

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])

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<string> {
+  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 (

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 */}`,
     })
   }