uniapp图片压缩

在Uniapp中进行图片压缩可以使用组件和Vuex来实现。首先，在HTML部分，你可以使用`<compression-image />`组件来进行图片压缩。在JS部分，你可以使用以下代码来进行图片压缩：

const test = async () => {
  const url = await getCompressionImage("这里传入需要压缩图片的路径", "这里传入图片大小", "这里传入图片的类型");
  console.log(url, "这里就是压缩后的图片路径，传给后端就好啦！");
}

在Vuex中，你可以存放`compressionImage`组件的一些数据。以下是一个示例代码：

export default {
  state: {
    compressionImageThis: null, // compressionImage组件的this
  },
  getters: {
    getCompressionImageThis: state => {
      return state.compressionImageThis; // 获取compressionImage组件的实例
    }
  },
  mutations: {
    setCompressionImageThis: (state, data) => {
      state.compressionImageThis = data; // 设置compressionImage组件的实例
    }
  }
}

为了在不同文件之间共享数据，你可以使用Vuex来记录`this`。在模板中，你可以使用`<canvas>`元素来进行图片压缩。以下是一个示例代码：

<template>
  <canvas canvas-id="compression-image" style="position: fixed; left: -99999px; top: -99999px; width: 1000px; height: 1000px;" />
</template>

<script>
export default {
  name: "compression-image",
  mounted() {
    this.$store.commit("setCompressionImageThis", this);
  },
  beforeDestroy() {
    this.$store.commit("setCompressionImageThis", null);
  },
}
</script>

通过以上方法，你可以在Uniapp中实现图片压缩功能。
#### 引用[.reference_title]
- *1* *2* *3* [uniapp图片压缩](https://blog.csdn.net/LueLueLue77/article/details/129717677)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]