前端业务开发中使用原生js和elementui两种方式实现头像裁切上传的功能

日常业务开发中,无论是后台管理系统还是前台界面,都会遇到图片裁剪的业务需求,选择合适的尺寸或者图片的关键部分,满足我们的功能需求!!

效果预览

效果一:

请添加图片描述效果二:请添加图片描述

实现过程

1.原生js实现方式

引入cropperjs的库文件和样式

<script src="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.css" rel="external nofollow" >
*{padding: 0;margin: 0;box-sizing: border-box;font-family: "Poppins",sans-serif;
}
body{background-color: #025bee;
}
.wrapper{width: min(90%,800px);position: absolute;transform: translateX(-50%);left:50%;top:1em;background-color: #fff;padding: 2em 3em;border-radius: .5em;
}
.container{display: grid;grid-template-columns: 1fr 1fr;gap:1em;
}
.container .image-container,.container .preview-container{width: 100%;/* background-color: aquamarine; */
}input[type="file"]{display: none;
}label{display: block;position: relative;background-color: #025bee;font-size: 16px;text-align: center;width: 250px;color:#fff;padding: 16px 0;margin: 16px auto;cursor: pointer;border-radius: 5px;
}img{display: block;/**is key to cropper.js**/max-width: 100%;
}.image-container{width: 60%;margin: 0 auto;
}.options{display: flex;justify-content: center;gap:1em;
}
input[type="number"]{width: 100px;padding: 16px 5px;border-radius: .3em;border: 2px solid #000;
}button{padding: 1em;border-radius: .3em;border: 2px solid #025bee;background-color: #fff;color: #025bee;
}.btns{display: flex;justify-content: center;gap: 1em;margin-top: 1em;}
.btns button{font-size: 1em;
}
.btns a {border: 2px solid #025bee;background-color: #025bee;color: #fff;text-decoration: none;padding: 1em;font-size: 1em;border-radius: .3em;
}
.hide{display: none;
}
<div class="wrapper"><div class="container"><div class="image-container"><img src="" alt="" id="image"></div><div class="preview-container"><img src="" alt="" id="preview-image"></div></div><input type="file" name="" id="file" accept="image/*"><label for="file">选择一张图片</label><div class="options hide"><input type="number" name="" id="height-input" placeholder="输入高度" max="780" min="0"><input type="number" name="" id="width-input" placeholder="输入宽度" max="780" min="0"><button class="aspect-ration-button">16:9</button><button class="aspect-ration-button">4:3</button><button class="aspect-ration-button">1:1</button><button class="aspect-ration-button">2:3</button><button class="aspect-ration-button">自由高度</button></div><div class="btns"><button id="preview" class="hide">预览</button><a href="" id="download" class="hide">下载</a></div></div>

核心步骤:

<script>const oFile = document.querySelector('#file')const oImage = document.querySelector('#image')const oDownload = document.querySelector('#download')const oAspectRation = document.querySelectorAll('.aspect-ration-button')const oOptions = document.querySelector('.options')const oPreview = document.querySelector('#preview-image')const oPreviewBtn = document.querySelector('#preview')const heightInput = document.querySelector('#height-input')const widthInput = document.querySelector('#width-input')let cropper = '',filename = ''/*** 上传事件* * /*/oFile.onchange = function(e){oPreview.src=""heightInput.value = 0widthInput.value = 0oDownload.classList.add('hide')const reader = new FileReader()reader.readAsDataURL(e.target.files[0])reader.onload = function(e){oImage.setAttribute('src',e.target.result)if(cropper){cropper.destory()}cropper = new Cropper(oImage)oOptions.classList.remove('hide')oPreviewBtn.classList.remove('hide')}filename = oFile.files[0].name.split(".")[0]oAspectRation.forEach(ele => {ele.addEventListener('click', () => {if(ele.innerText === '自由高度'){cropper.setAspectRatio(NaN)}else{cropper.setAspectRatio(eval(ele.innerText.replace(":",'/')))}}, false)})heightInput.addEventListener('input', () => {const {height} = cropper.getImageData()if(parseInt(heightInput.value) > Math.round(height)){heightInput.value = Math.round(height)}let newHeight = parseInt(heightInput.value)cropper.setCropBoxData({height:newHeight})}, false)widthInput.addEventListener('input', () => {const {width} = cropper.getImageData()if(parseInt(widthInput.value) > Math.round(width)){widthInput.value = Math.round(width)}let newWidth = parseInt(widthInput.value)cropper.setCropBoxData({width:newWidth})}, false)oPreviewBtn.addEventListener('click', (e) => {e.preventDefault();oDownload.classList.remove('hide');let imgSrc = cropper.getCroppedCanvas({}).toDataURL();oPreview.src = imgSrc;oDownload.download = `cropped_${filename}.png`;oDownload.setAttribute('href',imgSrc)}, false)}</script>
  1. vue2+elementui实现

安装vue-cropper库

npm i vue-cropper

静态页面

<template><g-container><div><span>点击头像,更换头像:</span><el-avatar @click.native="handleShowCropper" :src="avatarUrl"></el-avatar></div><el-dialogtitle="更换头像":visible.sync="dialogVisible"width="800px":before-close="dialogBeforeClose"v-if="dialogVisible"append-to-body><el-row :gutter="10"><el-col :span="12" :style="{ height: '350px' }"><vueCropperref="cropper":img="option.img":info="true":auto-crop="option.autoCrop":outputSize="option.size":outputType="option.outputType"@realTime="realTime"centerBox></vueCropper></el-col><el-col :span="12" class="preview-container"><div class="avatar-upload-preview"><div :style="previews.div"><img :src="previews.url" :style="previews.img" /></div></div></el-col></el-row><el-row :gutter="10" style="margin-top:20px;text-align:center" justify="center"><el-col :span="4"><el-uploadactionname="file"accept="image/*":before-upload="beforeUpload":show-upload-list="false"><el-button icon="upload">选择图片</el-button></el-upload></el-col><el-col :span="3"><el-button type="primary" @click="changeScale(1)">放大</el-button></el-col><el-col :span="3"><el-button type="primary" @click="changeScale(-1)">缩小</el-button></el-col><el-col :span="3"><el-button type="primary" @click="rotateLeft">左旋转</el-button></el-col><el-col :span="3"><el-button type="primary" @click="rotateRight">右旋转</el-button></el-col><el-col :span="3"><el-button type="primary" @click="saveHandle('blob')">保存</el-button></el-col></el-row><div slot="footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></div></el-dialog></g-container>
</template>

在这里插入图片描述
在这里插入图片描述
关键的js代码实现

export default {components: {VueCropper,},data() {return {option: { img: "", size: 1, outputType: "", autoCrop: true },dialogVisible: false,previews: {},avatarUrl:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",};},methods: {handleShowCropper() {this.dialogVisible = true;},dialogBeforeClose() {this.dialogVisible = false;},changeScale(num) {this.$refs.cropper.changeScale(num);},// 左旋转rotateLeft() {this.$refs.cropper.rotateLeft();},// 右旋转rotateRight() {this.$refs.cropper.rotateRight();},beforeUpload(file) {console.log("🚀 ~ beforeUpload ~ file:", file);const reader = new FileReader();//转化为base64reader.readAsDataURL(file);reader.onload = () => {console.log(reader, "reader");// this.previews.url = reader.result;this.option.img = reader.result;};},// 裁剪之后的数据realTime(data) {console.log("🚀 ~ realTime ~ data:", data);this.previews = data;},// 上传图片(点击保存按钮)saveHandle(type) {this.$refs.cropper.getCropData((data) => {this.dialogVisible = false;console.log(data);// data为base64图片,供接口使用this.avatarUrl = data;this.$emit("save", data);});},beforeDestory() {this.previews = null;this.option = null;},},
};
</script>

组件的option配置项,大家可以去逐个测试下,体验下效果!!
在这里插入图片描述
这样,我们就实现了两种不同的图像裁剪上传!!

附上参考资料:Cropperjs官网

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

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

相关文章

VS(Visual Studio)中查找项目里的中文字符

目录 正则表达式查找中文字符 正则表达式查找中文字符 在Visual Studio (VS) 中查找所有的中文字符&#xff0c;你可以使用其强大的查找和替换功能。不过&#xff0c;由于中文字符的范围非常广泛&#xff08;包括简体中文、繁体中文、日本汉字、韩国汉字等&#xff09;&#xf…

GPT3 终极指南(一)

原文&#xff1a;zh.annas-archive.org/md5/6de8906c86a2711a5a84c839bec7e073 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 GPT-3&#xff0c;或者说是 Generative Pre-trained Transformer 3&#xff0c;是由 OpenAI 开发的基于 Transformer 的大型语言模型…

平安城市 校园 景区 停车场网络语音对讲立柱SV-11TS

平安城市 校园 景区 停车场网络语音对讲立柱SV-11TS 长方形立柱式设计&#xff0c;外观简约&#xff0c;线条优美&#xff0c;工艺考究&#xff0c;坚固耐用可一键实现在紧急情况下求助报警、事件咨询&#xff0c;与SIP网络对讲主机进行全双工对讲。内置警示灯&#xff0c;呼叫…

iOS ------ Method Swizzling (动态方法交换)

一&#xff0c;Method Swizzling 简介 Method&#xff08;方法&#xff09;对应的是objc_method结构体&#xff1b;而objc_method结构体中包含了SEL method_name(方法名&#xff09;&#xff0c;IMP method_imp&#xff08;方法实现&#xff09; // objc_method 结构体 typed…

Linux下启动jenkins报错问题解决

jenkins端口报错 java.io.IOException: Failed to start Jettyat winstone.Launcher.<init>(Launcher.java:209)at winstone.Launcher.main(Launcher.java:496)at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)at java.base/jdk.int…

【题目】2023年全国职业院校技能大赛 GZ073 网络系统管理赛项赛题第3套A模块

2023年全国职业院校技能大赛 GZ073网络系统管理赛项 赛题第3套 信息安全管理与评估 网络系统管理 网络搭建与应用 云计算 软件测试 移动应用开发等多个赛项技术支持 任务书&#xff0c;赛题&#xff0c;解析等资料&#xff0c;知识点培训服务 添加博主wx&#xff1a;liuliu54…

全国产化BMC子卡详细介绍

一款基于全国产的BMC子卡&#xff0c;可实现ChMC/IPMC功能。子卡遵循IPMI 1.5/2.0协议规范&#xff0c;也支持客制OEM命令。子卡可获取载板板卡环境信息&#xff0c;板卡属性信息和板卡状态信息等&#xff0c;其中包括温度、电压、电流等信息&#xff1b;FRU、系统版本、CPU型号…

Django整合多种认证方式

承接上一篇&#xff1a;Django知识点总结-CSDN博客 目录 25.使用 Django REST framework实现用户认证和授权 26.通过djangorestframework-simplejwt使用JWT(JSON Web Token) 27.使用django-auth-ldap进行用户认证 28. 使用django-cas-ng实现集中认证及实现单点登录 29. …

实时监控视频拼接系统:功能和拼接参数介绍

目录 一、实时视频拼接系统介绍 &#xff08;一&#xff09;实时视频拼接的定义 &#xff08;二&#xff09;主要功能 1、视频拼接 2、拼接形式选择 3、前端选择 4、拼接展示 5、数据处理效率提升 6、任务管理 &#xff08;三&#xff09;实时拼接效果 二、拼接需要…

【JavaEE】Thread的方法和属性

文章目录 1、Thread的常见构造方法2、Thread的几个常见属性2.1 ID2.2 名称2.3 状态2.4 优先级2.5 是否后台线程2.6 是否存活2.7 是否被中断 3.补充说明3.1 Thread.sleep()的作用3.2 Thread.sleep()的异常处理方式 1、Thread的常见构造方法 方法说明Thread()创建线程对象Thread…

10G MAC层设计系列-(2)MAC RX模块

一、概述 MAC RX模块的需要进行解码、对齐、CRC校验。 因为在空闲的时候10G PCS/PMA会一直向外吐空闲符&#xff08;x07&#xff09;所以需要根据开始符、结束符将有效数据从码流中截取&#xff0c;也就是解码。 因为开始字符的所在位置有两种形式&#xff0c;而结束字符的位…

白盒测试与黑盒测试区别和联系

一、概念辨析 白盒测试 黑盒测试 二、其他测试方法 三、相关练习

算法训练营第十三天 | LeetCode 239 滑动窗口最大值、LeetCode 347 前K个高频元素

LeetCode 239 滑动窗口最大值 本体初始思路是这样的&#xff0c;首先看下给定数组长度和维持一个滑动窗口所需要花费的时间复杂度之间的关系。初步判断是还行的&#xff0c;当然后面被样例打脸了。需要更新成优先队列的解法。原本的解法能通过37/51和46/51的测试用例。但这还不…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-6.5--I.MX6U启动方式

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

VS Code工具将json数据格式化

诉求&#xff1a;json数据格式化应该在工作中用到的地方特别多&#xff0c;为了更方便、更仔细的对json数据查看&#xff0c;将json数据格式化是非常有必要的。 VS Code中如何将json数据快速格式化 1、在VS Code中安装Beautify JSON插件 2、安装完后在需要格式化的文件中按住…

Web APIs 学习归纳6--- BOM浏览器对象

前面几节主要针对DOM进行了学习&#xff0c;现在开始新的内容的学习---DOM浏览器对象。 DOM是更注重页面&#xff08;document&#xff09;内容的设计&#xff0c;但是BOM不仅限于页面&#xff08;document&#xff09;的设计&#xff0c;而是更加全面包括页面的刷新&#xff0…

【linux学习指南】linux指令与实践文件编写

文章目录 &#x1f4dd;前言&#x1f320; linux目录结构&#x1f309;linux命令介绍 &#x1f320;pwd命令&#x1f309;mkdir指令&#xff08;重要&#xff09; &#x1f320;cd 指令&#x1f309;touch指令 &#x1f320;rmdir指令 && rm 指令&#xff08;重要&…

抖音评论区精准获客自动化获客释放双手

挺好用的&#xff0c;评论区自动化快速获客&#xff0c;如果手动点引流涨&#xff0c;那就很耗费时间了&#xff0c;不是吗&#xff1f; 网盘自动获取 链接&#xff1a;https://pan.baidu.com/s/1lpzKPim76qettahxvxtjaQ?pwd0b8x 提取码&#xff1a;0b8x

Dashboard 安装部署

Dashboard 安装部署 Dashboard 安装部署 一&#xff1a;下载 二&#xff1a;部署步骤 1.镜像下载及导入 国内直接拉外网镜像会失败&#xff0c;可在境外下载镜像 查看 deployment 里的镜像版本 Dashboard Deploymentcontainers:- name: kubernetes-dashboardimage: k8s.g…

Unity Audio Filter 入门

概述&#xff1a; 如果你在你项目中需要一些特殊的声音效果&#xff0c;那这部分声音过滤器的部分一定不要错过喔&#xff0c;让我们来学习这部分的内容吧&#xff01; 这部分理论性比较强&#xff0c;认真看我的注解哈&#xff0c;我尽量解释的易懂一点。 Audio Chorus Filter…