Vue实现base64编码图片间的切换功能

要实现Vue中base64编码图片间的切换功能，需要以下步骤：

1. 生成base64编码图片

使用FileReader对象和canvas元素可以将普通图片转化成base64编码图片，具体步骤如下：

// 生成base64编码图片
const file = e.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')
    const ctx = canvas.getContext('2d')
    canvas.width = img.width
    canvas.height = img.height
    ctx.drawImage(img, 0, 0, img.width, img.height)
    const base64Img = canvas.toDataURL('image/png', 1)
    this.base64Img = base64Img // 存储base64编码图片
  }
}

2. 实现切换功能

可以使用v-if或v-show指令来控制图片的显示与隐藏。具体步骤如下：

<template>
  <div>
    <button @click="showFirstImg">显示第一个图片</button>
    <button @click="showSecondImg">显示第二个图片</button>
    <img v-if="showFirst" :src="firstImg" />
    <img v-if="showSecond" :src="secondImg" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showFirst: true,
      showSecond: false,
      firstImg: '', // 第一个图片的base64编码字符串
      secondImg: '', // 第二个图片的base64编码字符串
    }
  },
  methods: {
    showFirstImg() {
      this.showFirst = true
      this.showSecond = false
    },
    showSecondImg() {
      this.showFirst = false
      this.showSecond = true
    },
  },
}
</script>

示例一：

<template>
  <div>
    <label for="file">上传图片:</label>
    <input type="file" @change="convertFileToBase64" />
    <button @click="showImage">显示图片</button>
    <img v-if="show" :src="base64Img" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      base64Img: '', // 存储base64编码图片
      show: false,
    }
  },
  methods: {
    convertFileToBase64(e) {
      // 生成base64编码图片
      const file = e.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')
          const ctx = canvas.getContext('2d')
          canvas.width = img.width
          canvas.height = img.height
          ctx.drawImage(img, 0, 0, img.width, img.height)
          const base64Img = canvas.toDataURL('image/png', 1)
          this.base64Img = base64Img
        }
      }
    },
    showImage() {
      // 显示base64编码图片
      this.show = true
    },
  },
}
</script>

示例二：

<template>
  <div>
    <label for="file1">上传第一个图片:</label>
    <input type="file" id="file1" @change="convertFileToBase64(1)" />
    <label for="file2">上传第二个图片:</label>
    <input type="file" id="file2" @change="convertFileToBase64(2)" />
    <button @click="showFirstImg">显示第一个图片</button>
    <button @click="showSecondImg">显示第二个图片</button>
    <img v-if="showFirst" :src="firstImg" />
    <img v-if="showSecond" :src="secondImg" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstImg: '', // 第一个图片的base64编码字符串
      secondImg: '', // 第二个图片的base64编码字符串
      showFirst: true,
      showSecond: false,
    }
  },
  methods: {
    convertFileToBase64(index) {
      // 生成base64编码图片
      const file = index === 1 ? this.$refs.file1.files[0] : this.$refs.file2.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')
          const ctx = canvas.getContext('2d')
          canvas.width = img.width
          canvas.height = img.height
          ctx.drawImage(img, 0, 0, img.width, img.height)
          const base64Img = canvas.toDataURL('image/png', 1)
          if (index === 1) {
            this.firstImg = base64Img
          } else if (index === 2) {
            this.secondImg = base64Img
          }
        }
      }
    },
    showFirstImg() {
      // 显示第一个图片
      this.showFirst = true
      this.showSecond = false
    },
    showSecondImg() {
      // 显示第二个图片
      this.showFirst = false
      this.showSecond = true
    },
  },
}
</script>