一、运用cos或者oss进行图片截取

背景：我的图片分为俩种尺寸，720P和1080p，所以我需要根据不同的图片的尺寸，截取不同的区域

cos图片处理：cloud.tencent.com/document/pr…

oss图片处理：help.aliyun.com/zh/oss/user…

//获取图片的宽度 
const getImageHight = (url: string) => {
return new Promise(resolve => {
let img = new Image()
img.src = url
img.onload = function () {
    resolve(img.height) } }) 
}
//图片处理
const changeImgSize = ((url: string) => {
    let changeUrl: string = ''; 
    try { 
        let imgHight: any = await getImageHight(url) 
        if (imgHight == 1080) {
            changeUrl =
            url + '?x-oss-process=image/crop,x_0,y_0,w_1920,h_1080'
        } else if (imgHight == 720) {
            changeUrl =
            url + '?x-oss-process=image/crop,x_0,y_0,w_1638,h_720'
        } else {
            changeUrl = url
        }
        return url
    } catch (error) {
        return url
    }
})

二、vite插件实现图片压缩

"vite-plugin-imagemin": "^0.6.1" 
yarn add vite-plugin-imagemin -D

github地址

github.com/vbenjs/vite…

import viteImagemin from 'vite-plugin-imagemin'

const vitePlugins: (PluginOption | PluginOption[])[] = [

    vue({

      reactivityTransform: true

    }),

    vueJsx(),

    VitePluginCertificate({

      source: 'coding'

    }),

    viteImagemin({

      filter: (filename) => {

        // 只压缩 `src/assets/imgs` 目录下的图片

        return filename.includes('/imgs/');

      },

      gifsicle: {

        optimizationLevel: 7,

        interlaced: false

      },

      optipng: {

        optimizationLevel: 7

      },

      mozjpeg: {

        quality: 20

      },

      pngquant: {

        quality: [0.8, 0.9],

        speed: 4

      },

      svgo: {

        plugins: [

          {

            name: 'removeViewBox'

          },

          {

            name: 'removeEmptyAttrs',

            active: false

          }

        ]

      },
      // include: ['../../../src/assets/imgs/**/*'],
    }),
    svgIconsPlugin(isBuild),
    isBuild && VueSetupExtend()
  ]

三、实现vue3-lazy懒加载

github.com/ustbhuangyi…

如果是swiper循环，记得加：key，否则不会实时更新

"vue3-lazy": "1.0.0-alpha.1",
import lazyPlugin from 'vue3-lazy'
app.use(lazyPlugin, {
  loading: 'loading.png',
  error: 'error.png'
})