vue项目中实现图片裁剪功能

最新推荐文章于 2025-06-17 14:54:29 发布

林夕梦木子李

最新推荐文章于 2025-06-17 14:54:29 发布

阅读量6.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：未分类文章标签： vue 图片裁剪 cropperjs canvas

本文链接：https://blog.youkuaiyun.com/qq_37467034/article/details/91362291

本文介绍了在Vue 3.6.3项目中利用cropperjs和原生canvas实现图片裁剪的方法。通过安装cropperjs插件，设置img.crossOrigin属性避免跨域问题，创建cropperjs实例进行图片裁剪。同时，文章还讲述了如何使用canvas监听鼠标事件，结合isPointInPath()方法绘制并移动裁剪框，提供了完整的源码链接供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址

https://github.com/MY729/picture-crop-demo

在vue项目中实现图片裁剪功能

演示地址

https://my729.github.io/picture-crop-demo/dist/index.html

前言

vue版本：3.6.3 https://cli.vuejs.org/zh/
cropperjs: 1.5.1 https://github.com/fengyuanchen/cropperjs
elementUI https://element.eleme.io/#/zh-CN

使用 cropperjs插件和原生canvas 两种方式实现图片裁剪功能

使用cropperjs插件

安装cropperjs

yarn install cropperjs

初始化一个canvas元素，并在上面绘制图片

<canvas :id="data.src" ref="canvas"></canvas>

// 在canvas上绘制图片
drawImg () {
   
   
  this.$nextTick(() => {
   
   
    // 获取canvas节点
    let canvas = document.getElementById(this.data.src)
    if (canvas) {
   
   
      // 设置canvas的宽为canvas的父元素宽度，宽高比3:2
      let parentEle = canvas.parentElement
      canvas.width = parentEle.offsetWidth
      canvas.height = 2 * parentEle.offsetWidth / 3
      let ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      let img = new Image()
      img.crossOrigin = 'Anonymous'
      img.src = this.data.src
      img.onload = function () {
   
   
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)