前端开发 vue 把图片格式从bmp转jpg

在前端开发中，我们可以使用canvas来将bmp格式的图片转换为jpg格式。

以下是一个简单的Vue组件示例，可以将bmp图片转换为jpg格式：

<template>
  <div>
    <input type="file" @change="convertImage">
    <img :src="imageData" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: null
    }
  },

  methods: {
    convertImage(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const img = new Image()
        img.src = reader.result
        img.onload = () => {
          const canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          const ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
          const imageData = canvas.toDataURL('image/jpeg')
          this.imageData = imageData
        }
      }
    }
  }
}
</script>

这个Vue组件包含一个input元素和一个img元素。当选择文件后，它将读取文件并在canvas上绘制图像。然后，将canvas图像转换为jpg格式并将其作为base64编码的字符串分配给img元素的src属性。这样，我们就成功地将bmp图片转换为jpg格式了。