Vue中如何进行图片裁剪与上传?

news2024/12/26 14:41:27

Vue中如何进行图片裁剪与上传?

在Web开发中,经常需要使用图片,有时候需要对图片进行裁剪和上传,Vue作为一种流行的前端框架,提供了很多方便的工具和插件来帮助开发者实现这些功能。

在这里插入图片描述

图片裁剪

Vue中提供了很多图片裁剪的插件,本文介绍一种常用的插件vue-cropper,它是一个基于Vue的图片裁剪组件,可以快速实现图片的裁剪功能。

安装vue-cropper

安装vue-cropper非常简单,只需要使用npm或yarn安装即可。

npm install vue-cropper --save

使用vue-cropper

安装完成后,在需要使用的组件中引入vue-cropper,并在template中使用。

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :auto-crop="true"
      :output-type="'jpeg'"
      :output-quality="0.8"
      :fixed-box="true"
      :fixed-number="[1, 1]"
      :drag-mode="cropDragMode"
      :view-mode="1"
      :guides="true"
      :center="true"
      :zoomable="false"
      :rotatable="true"
      :scalable="false"
      :crop-box-movable="false"
      :crop-box-resizable="false"
      @crop-success="cropSuccess"
    ></vue-cropper>
    <button @click="crop">裁剪图片</button>
  </div>
</template>

在script中,引入vue-cropper,并在data中定义需要的变量和方法。

import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data () {
    return {
      imageSrc: '', // 图片地址
      cropDragMode: 'crop', // 裁剪模式
    }
  },
  methods: {
    crop () {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        // 将裁剪后的图片上传到服务器
        this.upload(blob)
      })
    },
    cropSuccess (croppedCanvas, blob) {
      // 裁剪成功后的回调函数
      console.log('裁剪成功')
    },
    upload (blob) {
      // 将图片上传到服务器
    },
  },
}

在上面的代码中,我们使用了vue-cropper的很多属性和方法,比如imageSrc表示图片的地址,cropDragMode表示裁剪模式,crop表示开始裁剪图片,cropSuccess表示裁剪成功的回调函数,upload表示将裁剪后的图片上传到服务器。

vue-cropper的属性和方法

vue-cropper提供了很多属性和方法,下面是一些常用的属性和方法。

属性

  • src:图片地址,必填。
  • auto-crop:是否自动裁剪,默认为false。
  • output-type:输出类型,默认为png。
  • output-quality:输出质量,默认为0.92。
  • fixed-box:是否固定裁剪框,默认为false。
  • fixed-number:裁剪框的宽高比例,默认为[1, 1]。
  • drag-mode:裁剪模式,默认为crop。
  • view-mode:预览模式,默认为0。
  • guides:是否显示裁剪框的辅助线,默认为true。
  • center:是否显示裁剪框的中心点,默认为true。
  • zoomable:是否可以缩放图片,默认为false。
  • rotatable:是否可以旋转图片,默认为true。
  • scalable:是否可以调整裁剪框大小,默认为false。
  • crop-box-movable:是否可以移动裁剪框,默认为false。
  • crop-box-resizable:是否可以调整裁剪框大小,默认为false。

方法

  • getCroppedCanvas():获取裁剪后的canvas。
  • getCroppedBase64():获取裁剪后的base64字符串。
  • getCroppedBlob():获取裁剪后的blob对象。

##图片上传

图片裁剪完成后,我们需要将裁剪后的图片上传到服务器,Vue中提供了很多上传图片的插件,比如axios、vue-upload-component等,本文介绍一种常用的插件vue-axios。

安装vue-axios

安装vue-axios也非常简单,只需要使用npm或yarn安装即可。

npm install vue-axios --save

使用vue-axios

安装完成后,在需要使用的组件中引入vue-axios,并在script中定义需要的变量和方法。

import VueAxios from 'vue-axios'
import axios from 'axios'

export default {
  components: { VueAxios },
  data () {
    return {
      imageSrc: '', // 图片地址
      cropDragMode: 'crop', // 裁剪模式
    }
  },
  methods: {
    crop () {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        // 将裁剪后的图片上传到服务器
        this.upload(blob)
      })
    },
    cropSuccess (croppedCanvas, blob) {
      // 裁剪成功后的回调函数
      console.log('裁剪成功')
    },
    upload (blob) {
      let formData = new FormData()
      formData.append('file', blob, 'avatar.jpg')
      axios.post('/upload', formData).then(response => {
        console.log('上传成功')
      }).catch(error => {
        console.log('上传失败')
      })
    },
  },
}

在上面的代码中,我们使用了axios的post方法将裁剪后的图片上传到服务器,并在then和catch中处理上传成功和失败的情况。

vue-axios的属性和方法

vue-axios提供了很多属性和方法,下面是一些常用的属性和方法。

属性

  • axios:axios实例,必填。

方法

  • $http.get(url[, config]):发送GET请求。
  • $http.post(url[, data[, config]]):发送POST请求。
  • $http.put(url[, data[, config]]):发送PUT请求。
  • $http.patch(url[, data[, config]]):发送PATCH请求。
  • $http.delete(url[, config]):发送DELETE请求。

完整代码

下面是完整的Vue组件代码,包括图片裁剪和上传。

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :auto-crop="true"
      :output-type="'jpeg'"
      :output-quality="0.8"
      :fixed-box="true"
      :fixed-number="[1, 1]"
      :drag-mode="cropDragMode"
      :view-mode="1"
      :guides="true"
      :center="true"
      :zoomable="false"
      :rotatable="true"
      :scalable="false"
      :crop-box-movable="false"
      :crop-box-resizable="false"
      @crop-success="cropSuccess"
    ></vue-cropper>
    <button @click="crop">裁剪图片</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'
import VueAxios from 'vue-axios'
import axios from 'axios'

export default {
  components: { VueCropper, VueAxios },
  data () {
    return {
      imageSrc: '', // 图片地址
      cropDragMode: 'crop', // 裁剪模式
    }
  },
  methods: {
    crop () {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        // 将裁剪后的图片上传到服务器
        this.upload(blob)
      })
    },
    cropSuccess (croppedCanvas, blob) {
      // 裁剪成功后的回调函数
      console.log('裁剪成功')
    },
    upload (blob) {
      let formData = new FormData()
      formData.append('file', blob, 'avatar.jpg')
      axios.post('/upload', formData).then(response => {
        console.log('上传成功')
      }).catch(error => {
        console.log('上传失败')
      })
    },
  },
}
</script>

结语

本文介绍了Vue中如何进行图片裁剪和上传,通过使用vue-cropper和vue-axios插件,可以快速实现这些功能。当然,除了这两个插

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/636493.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

采用SSM框架实现登录拦截,分页,批量删除的功能

本案列采用的技术有后端spring/springmvc/mybatis/jquery等技术&#xff0c;前端采用bootstrapjsp 项目结构如下图 依赖pom.xml文件 <dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version>…

怎样的低代码平台才算是一个好用的低代码平台?

随着数字化转型的加速&#xff0c;低代码平台已经成为了企业数字化转型的一个重要工具。低代码近几年是一个很热门的概念&#xff0c;市场对低代码的需求也不断增加&#xff0c;但到底什么样的低代码平台才算是一个好用的低代码平台&#xff1f; 一个好用的低代码平台应具备以…

Python源码:火柴棒摆数字有6根火柴棒,列出所有能摆出的自然数

题&#xff1a;用自定义函数&#xff0c;火柴棒摆数字有6根火柴棒&#xff0c;列出所有能摆出的自然数&#xff0c; 要求火柴棒正好摆完 解析&#xff1a; 1、0-9这十个数字&#xff0c;每个数字分别需要的火柴根数如下 2、用6根火柴摆出的最小数字是&#xff1a;0 用6根火柴…

深入理解CSS字符转义行为

深入理解CSS字符转义行为 深入理解CSS字符转义行为 前言为什么要转义&#xff1f;CSS 转义什么是合法css的表达式 左半部分右半部分 练习参考链接 前言 在日常的开发中&#xff0c;我们经常写css。比如常见的按钮: <button class"btn"></button>&am…

YOLO输出大中小目标的AP值

在进行实验的过程中&#xff0c;博主一直使用的是COCO数据集&#xff0c;其评价指标如下所示&#xff0c;包含大中小目标的AP值与AR值。博主选用了yolov5与yolov7进行实验&#xff0c;其中yolov5成功&#xff0c;yolov7却出现了问题。 随后博主在进行对比实验时使用了YOLO模型&…

烟草仓库监控有多重要?给你支一招

随着全球烟草行业的发展&#xff0c;烟草仓库监控变得越来越重要。烟草作为一种易燃、易损和有害物质&#xff0c;需要特殊的保管和监控措施&#xff0c;以确保烟草的质量、安全和合规性。 烟草仓库监控的目的是实时监测和管理烟草仓库内的环境参数&#xff0c;如温度、湿度、气…

一些有趣的兼容性测试事实和技巧

兼容性测试是一种重要的测试方法&#xff0c;可以确定软件或应用程序是否能够在不同的操作系统、浏览器、设备上正常运行。以下是一些有趣的兼容性测试事实和技巧。 事实1&#xff1a;同样的代码在不同的浏览器中会产生不同的结果。 由于不同的浏览器对相同代码的解释不同&…

【微信公众平台对接】有关【创建发票卡券模板】调用示例

1、微信开放平台接口说明&#xff1a; 2、代码示例 /*** 创建发票卡券模板** param token* return*/PostMapping("createCard")public String createCard(String token) {return wechatOpenService.createCard(token);}String resp null;try {String url String.fo…

电路板电镀中4种特殊的电镀方法

本文主要介绍的是电路板焊接中的4中特殊电镀方法。 第一种&#xff0c;指排式电镀 常常需要将稀有金属镀在板边连接器、板边突出接点或金手指上以提供较低的接触电阻和较高的耐磨性&#xff0c;该技术称为指排式电镀或突出部分电镀。常将金镀在内层镀层为镍的板边连接器突出触…

武职301班-day01

实现永和小票页面 效果图 问题分析 把一个大的开发任务&#xff0c;先进行任务分析&#xff0c;把完成这个任务需要的技术点和开发步骤写出来。 开发分析 特点&#xff1a; htmlcss实现 1&#xff09;小票有宽度限制 2&#xff09;字体大小不一样&#xff0c;大部分字体大小…

FTSE-250 CMC Markets投资StrikeX Technologies,巩固战略伙伴关系,革新数字资产行业

StrikeX非常高兴地宣布与屡获殊荣的FTSE 250金融服务提供商CMC Markets成功完成投资和战略合作伙伴关系。CMC Markets已经收购了StrikeX Technologies 33%的股份&#xff0c;并将其两位高级执行官纳入StrikeX董事会&#xff0c;为公司带来了丰富的专业知识和经验。这对于两家公…

Linux第一章之环境搭建

目录 一、什么是Linux 1.1前端VS后端 1.2企业为何选择使用Linux作为后台服务器 1.3国内企业后台和用户使用Linux现状 1.4就个人找工作/能力提升来说&#xff0c;该如何看待Linux 1.5求职相关 ​1.6Linux好玩的指令 1.7Linux基本代码编写 1.8内存/CPU/硬盘/外设等硬件&…

pm2原理与使用

目录 pm2是什么以及好处 原理 Node Cluster pm2工作流程 常用命令 安装 启动进程 查看进程 重启/删除 日志 pm2是什么以及好处 pm2是一个内建了负载均衡器的node进程管理工具&#xff0c;可以利用它来简化很多node应用管理的繁琐任务&#xff0c;如自动监控进程状态…

Spring Boot - 自定义 banner

自定义 banner 在Spring Boot中&#xff0c;你可以通过定制Banner来个性化你的应用程序启动时的输出。Banner是一个在应用程序启动时显示的ASCII艺术字形式的标志&#xff0c;用于增加应用程序的识别度和个性化。 以下是一些定制Banner的方法&#xff1a; 创建自定义Banner文…

Echarts5.x词云图报错[ECharts] Unkown series wordCloud

问题原因 echarts2.0版本之后不再在引入的echarts中支持wordCloud,需单独引入。引入原js或者min都可以 预期效果 解决方法 https://github.com/ecomfe/echarts-wordcloud/blob/master/dist/echarts-wordcloud.min.js 复制这份文件到utils 然后再使用词云图的页面 import /u…

随机生成验证码

1.servlet代码 /** * 随机生成验证码 * 1.获取Image对象 * 2.1填充背景色 2.2画边框 生成随机角标 2.3写验证吗 2.4 画干扰线 *3.将图片输出到页面 */ package cn.itcast.web.servlet;import javax.imageio.ImageIO; import javax.servlet.*; import javax.servlet.http.*; im…

0基础学习VR全景平台篇第40篇:场景功能-场景加密

功能位置示意 一、本功能将用在哪里&#xff1f; ​ 单密码访问功能&#xff0c;常用于暂未确定的场景内容或暂未交付的项目&#xff0c;使用密码访问保护作品数据的私密性&#xff1b; 或为满足不同情境下的推广需求使用。 二、如何使用本功能&#xff1f; ​ 1、使用加…

CSS3_01:玩转文字渐变特效动画,这篇文章满足你,实现方式+案例完整源码

这里后面会陆续出一个关于css动画系列文章&#xff0c;关注布衣前端&#xff0c;实时获取。 在前端开发过程中&#xff0c;有时候需要特别显示页面某个文字特效&#xff0c;这时普通的文字颜色或者阴影已经无法满足需求。此时&#xff0c;css的线性渐变就派上用场了。 文字渐…

Difference of Normals Based Segmentation

文章目录 例子官网的可视化图片流程C cmakelist 参考 记录翻译一下pcl中的例子 实现的“法线差”功能&#xff0c;用于基于比例的无组织点云分割。 例子 官网的可视化图片流程 C 代码流程&#xff1a; 设置输入点云相关参数。图片左上设置两个半径求取法相量点云&#xff0c…

安装VastBase G100 v2.2 Build 12

1、防火墙设置 1.1 关闭防火墙和selinux 1.1.1 关闭防火墙 systemctl status firewalld.service systemctl stop firewalld.service systemctl disable firewalld1.1.2 关闭selinux vim /etc/selinux/config1.2 修改hosts文件,添加实际的IP地址和主机名 vi /etc/hosts 1.3…