feat: 上传图片组件场景添加、轮播图样式修复

This commit is contained in:
2025-09-08 21:22:25 +08:00
parent 9b53c536c7
commit 2089b31cb6
8 changed files with 135 additions and 92 deletions

View File

@@ -4,17 +4,14 @@ import Taro from '@tarojs/taro'
import uploadApi from '@/services/uploadFiles'
import './upload-from-wx.scss'
import { CoverImageValue } from '.'
import { uploadFileResponseData } from '@/services/uploadFiles'
export interface UploadFromWxProps {
onAdd: (images: CoverImageValue[], onFileUploaded: Promise<{ id: string, data: uploadFileResponseData }[]>) => void
onAdd: (images: CoverImageValue[], onFileUploaded: Promise<{ id: string, url: string }[]>) => void
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()
@@ -23,14 +20,13 @@ async function convert_to_jpg_and_compress (src: string, { width, height }): Pro
image.src = src
})
ctx.clearRect(0, 0, width, height)
ctx.drawImage(image, 0, 0, width, height)
ctx.drawImage(image as unknown as CanvasImageSource, 0, 0, width, height)
const imageData = ctx.getImageData(0, 0, width, height)
console.log(imageData, 'imageData')
// const imageData = ctx.getImageData(0, 0, width, height)
return new Promise((resolve, reject) => {
Taro.canvasToTempFilePath({
canvas,
canvas: canvas as unknown as Taro.Canvas,
fileType: 'jpg',
quality: 0.7,
success: res => resolve(res.tempFilePath),
@@ -43,7 +39,6 @@ async function convert_to_jpg_and_compress (src: string, { width, height }): Pro
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)
}
@@ -59,15 +54,14 @@ const IMAGE_MAX_SIZE = {
// 标准长宽比,判断标准
const STANDARD_ASPECT_RATIO = IMAGE_MAX_SIZE.width / IMAGE_MAX_SIZE.height
type ChoosenImageRes = { path: string, size: number, width: number, height: number }
// 根据图片标准重新设置图片尺寸
async function onChooseImageSuccess(tempFiles) {
console.log(tempFiles, 'tempFiles')
const result: { path: string, size: number, widht: number, height: number }[] = []
const result: ChoosenImageRes[] = []
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 }
let fileRes: ChoosenImageRes = { path: tempFile.path, size: tempFile.size, width: 0, height: 0 }
// 如果图片长宽比小于标准长宽比,则依照图片高度以及图片最大高度来重新设置图片尺寸
if (image_aspect_ratio < STANDARD_ASPECT_RATIO) {
fileRes = {