cropperjs处理图片预览裁切功能

图片预览裁切有两种方法，结合服务器的图片上传预览或者纯客户端实现上传图片预览。
纯客户端实现上传图片预览：
定义一个input标签 type设置为file 设置自带的属性hidden
<input type="file" hidden ref="file" @change="onFileChange" />
对选择器表单进行隐藏,点击头像触发input表单的点击事件@click="$refs.file.click()"
在change事件中获取文文件对象
const file = fileInput.files[0]
设置图片的 src
this.img = window.URL.createObjectURL(file)
file-input 如果选择了同一个文件不会触发change事件
解决方法就是每次使用完毕把他的value清空
this.$refs.file.value = ''

引用第三方库cropperjs处理图片裁切

npm install cropperjs

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

因为要操作DOM,所以要在组件初始化之后再调用

mounted() {const image = this.$refs.imgthis.cropper = new Cropper(image, {viewMode: 1,dragMode: 'move',aspectRatio: 1,autoCropArea: 1,cropBoxMovable: false,cropBoxResizable: false,background: false})}

项目要求默认配置

         viewMode: 1,dragMode: 'move',aspectRatio: 1,autoCropArea: 1,cropBoxMovable: false,cropBoxResizable: false,background: false

如果是基于服务端的裁切，则使用：getData 方法，该方法得到裁切的区域参数然后传给服务端。

this.cropper .getData()

如果是纯客户端的图片裁切，则使用：getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）。

// 获取裁切的文件对象
cropper.getCroppedCanvas().toBlob((blob) => {console.log(blob)}

发送请求

try {// 如果接口要求 Content-type是 multipart/form-data// 则你必须传递fromdata对象const formData = new FormData()formData.append('photo', blob)const { data } = await changeUserPhoto(formData)console.log(data)// 关闭弹出层this.$emit('close')// 更新视图this.$emit('update-photo', data.data.photo)this.$toast.success('上传成功!')} catch (err) {this.$toast.fail('上传失败!')console.log(err)}

图片预览裁切有两种方法，结合服务器的图片上传预览或者纯客户端实现上传图片预览。
纯客户端实现上传图片预览：
定义一个input标签 type设置为file 设置自带的属性hidden

<input type="file" hidden ref="file" @change="onFileChange" />

对选择器表单进行隐藏,点击头像触发input表单的点击事件@click="$refs.file.click()"
在change事件中获取文文件对象
const file = fileInput.files[0]
设置图片的 src
this.img = window.URL.createObjectURL(file)
file-input 如果选择了同一个文件不会触发change事件
解决方法就是每次使用完毕把他的value清空
this.$refs.file.value = ''

引用第三方库cropperjs处理图片裁切

npm install cropperjs
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

因为要操作DOM,所以要在组件初始化之后再调用

mounted() {const image = this.$refs.imgthis.cropper = new Cropper(image, {viewMode: 1,dragMode: 'move',aspectRatio: 1,autoCropArea: 1,cropBoxMovable: false,cropBoxResizable: false,background: false})}

项目要求默认配置

     viewMode: 1,dragMode: 'move',aspectRatio: 1,autoCropArea: 1,cropBoxMovable: false,cropBoxResizable: false,background: false

如果是基于服务端的裁切，则使用：getData 方法，该方法得到裁切的区域参数然后传给服务端。

this.cropper .getData()
如果是纯客户端的图片裁切，则使用：getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）。

// 获取裁切的文件对象

cropper.getCroppedCanvas().toBlob((blob) => {console.log(blob)}

发送请求

try {// 如果接口要求 Content-type是 multipart/form-data// 则你必须传递fromdata对象const formData = new FormData()formData.append('photo', blob)const { data } = await changeUserPhoto(formData)console.log(data)// 关闭弹出层this.$emit('close')// 更新视图this.$emit('update-photo', data.data.photo)this.$toast.success('上传成功!')} catch (err) {this.$toast.fail('上传失败!')console.log(err)}

cropperjs处理图片预览裁切功能相关推荐

SupeSite后台添加新闻增加【预览】功能
SupeSite后台添加新闻增加[预览]功能实现目的:为了添加新闻时候更方便! 实现原因:添加新闻时候可能有些样式会出现错误,生成静态页之后再去看的时候会比较浪费时间. 实现步骤: 1.在后台找到a ...
给FlvDownloader加了一个视频预览的功能
今天晚上给FlvDownloader加了一个视频预览的功能,内嵌了一个Flv播放器,现在可以一边下一边播放了,功能集成后在使用用上比上个版本的预览功能要方便不少,不用两边拷贝地址了. 并且基本功能都比 ...
前端学习（2698）：重读vue电商网站19之处理图片预览操作
图片预览窗可以用 el-dialog 组件来做,然后通过 on-preview 函数来处理图片预览的操作. Js  <el-dialog title=&qu ...
计算机窗口预览图,window_Win7系统资源管理器加上预览窗格功能的方法，　　图片缩略图是否太小？PPT - phpStudy...
Win7系统资源管理器加上预览窗格功能的方法图片缩略图是否太小?PPT如果预览一下是不是更好寻找文件?小编此次带来的一个比较实用的功能--在Win7系统的资源管理器开启窗格预览功能,不仅可以在右侧预 ...
上传身份证照片js_html+css+js 实现拍照预览上传图片功能
前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现图片选中后的预览及压缩 ...
win7计算机右边预览,Win7系统资源管理器加上预览窗格功能的方法
图片缩略图是否太小?PPT如果预览一下是不是更好寻找文件?小编此次带来的一个比较实用的功能--在Win7系统的资源管理器开启窗格预览功能,不仅可以在右侧预览图片大图,还能预览PPT.表格文件等文件,便 ...
酷播更新了html5和flash播放器的优先级选项和收费预览视频功能
感觉要变天了,灰蒙蒙的.好久没有下雨了... 应用场景说明: 1. 实现让用户预览一小段视频节目: 2. 设定一个预览时间,比如15秒,播放完15秒后,弹出对话框,提示用户须注册(或须付费购买): 3 ...
typora 浏览器预览_功能演示丨Adobe Xd安卓手机实时预览教程
记得把我设为星标哦,不然就看不到我了距离我们发布实时预览这个功能已经过去了一个月,这篇攻略上的有点晚但是很必要,请使用安卓设备的同学们请查收~ 我们需要尊重一下使用安卓手机的设计师们,并不是所有的设 ...
android拍照功能无预览,Android快速实现无预览拍照功能
本文实例为大家分享了Android实现无预览拍照功能的具体代码,供大家参考,具体内容如下实现思路: 把预览的SurfaceView的宽高设置为肉眼看不出的值,例如0.1dp,其他的就是自定义相机的标 ...

cropperjs处理图片预览裁切功能

cropperjs处理图片预览裁切功能相关推荐

最新文章

热门文章