Vue结合Canvas图片压缩上传服务器

2023-12-20 12:02:14

在这篇文章里，我们将带您了解如何借助Vue和Canvas的强大功能，实现图片的压缩和上传过程。通过结合Vue框架和Canvas API，我们可以轻松构建一个可视化的图片选择器，并利用Canvas对图片进行压缩处理，以便进行更加高效和快速的上传。

技术概述：

Vue.js： 一个流行的前端JavaScript框架，擅长构建单页应用程序。
Canvas API： HTML5中用于图像绘图和操作的API。
FormData： 一个JavaScript对象，用于创建并发送包含二进制数据的表单。
Fetch API： 一个用于发送HTTP请求和接收响应的JavaScript API。

步骤一：项目初始化

首先，我们需要创建一个Vue项目。这可以通过使用Vue CLI或其他构建工具来完成。然后，我们需要安装必要的依赖项，包括Vue、Vant（一个移动端UI组件库）和Canvas2Image（一个用于将Canvas转换为图像的库）。

npm install vue vant canvas2image

步骤二：创建Vue组件

接下来，我们需要创建一个Vue组件，用于处理图片的选择、压缩和上传。在这个组件中，我们将使用Vant提供的组件来构建用户界面，并使用Canvas API来对图片进行压缩。

<template>
  <div>
    <van-uploader
      accept="image/*"
      multiple
      capture="camera"
      @change="handleImageChange"
    >
      <van-icon name="photograph" />
    </van-uploader>
    <van-button type="primary" @click="handleUpload">上传</van-button>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useCompressImage } from './useCompressImage'

export default {
  setup() {
    const selectedImages = ref([])
    const { compressImage } = useCompressImage()

    const handleImageChange = (files) => {
      selectedImages.value = files
    }

    const handleUpload = async () => {
      const formData = new FormData()
      for (const file of selectedImages.value) {
        const compressedImage = await compressImage(file)
        formData.append('image', compressedImage)
      }

      fetch('/upload', {
        method: 'POST',
        body: formData,
      })
    }

    return {
      selectedImages,
      handleImageChange,
      handleUpload,
    }
  },
}
</script>

步骤三：使用Canvas压缩图片

在上面的代码中，我们使用useCompressImage函数来压缩图片。这个函数使用Canvas API来创建一个与原始图片大小相同的Canvas元素，然后将原始图片绘制到Canvas上。接下来，我们使用Canvas2Image库将Canvas转换为一个Blob对象，以便将其发送给服务器。

import { ref } from 'vue'

export const useCompressImage = () => {
  const compressImage = async (file) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const image = new Image()

    image.onload = () => {
      const { width, height } = image
      canvas.width = width
      canvas.height = height
      ctx.drawImage(image, 0, 0, width, height)

      canvas2image.toBlob(canvas, 'image/jpeg', 0.7)
        .then((blob) => {
          return new File([blob], file.name, { type: 'image/jpeg' })
        })
    }

    image.src = URL.createObjectURL(file)

    return new Promise((resolve) => {
      image.onload = () => {
        resolve(compressImage)
      }
    })
  }

  return {
    compressImage,
  }
}

步骤四：上传图片到服务器

最后，我们需要在服务器上创建一个路由来处理图片上传。在这个路由中，我们可以使用multer库来处理上传的文件。

const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/upload', upload.array('image'), (req, res) => {
  res.json({ success: true })
})