当前位置：首页 > VUE

vue实现ps图片编辑

2026-02-09 15:37:27VUE

Vue 实现 PS 图片编辑功能

Vue 结合第三方库可以实现类似 Photoshop 的图片编辑功能，以下是一些关键方法和工具：

使用 fabric.js 实现基础图片编辑

fabric.js 是一个强大的 Canvas 库，适合在 Vue 中实现图片编辑功能。

安装依赖：

vue实现ps图片编辑

npm install fabric

基础示例代码：

<template>
  <div>
    <canvas ref="canvas" width="800" height="600"></canvas>
    <input type="file" @change="handleImageUpload">
  </div>
</template>

<script>
import { fabric } from 'fabric'
export default {
  mounted() {
    this.canvas = new fabric.Canvas(this.$refs.canvas)
  },
  methods: {
    handleImageUpload(e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = (event) => {
        fabric.Image.fromURL(event.target.result, (img) => {
          this.canvas.add(img).renderAll()
        })
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

图片滤镜效果实现

通过 fabric.js 的滤镜功能可以实现多种图片效果：

vue实现ps图片编辑

// 灰度滤镜
applyGrayscale() {
  const image = this.canvas.getActiveObject()
  image.filters.push(new fabric.Image.filters.Grayscale())
  image.applyFilters()
  this.canvas.renderAll()
}

// 模糊滤镜
applyBlur() {
  const image = this.canvas.getActiveObject()
  image.filters.push(new fabric.Image.filters.Blur({
    blur: 0.5
  }))
  image.applyFilters()
  this.canvas.renderAll()
}

使用 vue-advanced-cropper 实现高级裁剪

安装依赖：

npm install vue-advanced-cropper

示例用法：

<template>
  <cropper
    :src="imageSrc"
    :stencil-props="{
      aspectRatio: 16/9
    }"
    @change="change"
  />
</template>

<script>
import { Cropper } from 'vue-advanced-cropper'
export default {
  components: { Cropper },
  data() {
    return {
      imageSrc: '/sample.jpg'
    }
  },
  methods: {
    change({ coordinates, canvas }) {
      // 处理裁剪结果
    }
  }
}
</script>

集成更多功能的方案

使用 tui-image-editor 提供更全面的编辑功能
结合 konva.js 实现图层管理
添加自定义工具条组件控制编辑功能

保存编辑结果

saveImage() {
  const dataURL = this.canvas.toDataURL({
    format: 'png',
    quality: 0.8
  })
  const link = document.createElement('a')
  link.download = 'edited-image.png'
  link.href = dataURL
  link.click()
}

这些方法可以帮助在 Vue 项目中实现基础的图片编辑功能，根据需求可以进一步扩展更复杂的功能模块。