vue-cropper

github地址：https://github.com/xyxiao001/vue-cropper

安装

npm install vue-cropperyarn add vue-cropper

在入口文件中引用

import VueCropper from "vue-cropper";Vue.use(VueCropper);

使用

在使用上面的话，直接使用就很简单了。

<div style="width:100%;height:500px"><vue-cropper autoCrop img="https://shnhz.github.io/shn-ui/img/Koala.jpg" ref="cropper" centerBox/>
</div>
<shn-button @click="getCropData()" block ref="cropper" style="margin:10px 0" type="primary">获取截图后的图片</shn-button>
export default {methods:{getCropData() {this.$refs.cropper.getCropData(data => {console.log(data)})}}
}

只需要一个图片地址和一个导出截取后图片的方法，vue-cropper在截取图片后会返回一个图片的base64数据。

和ant vue 一起使用

在项目中使用的是 ant 的UI，所以分享一下两者怎么结合到一起。

<a-uploadname="avatar"v-model="form.snapshotJson"list-type="picture-card"class="avatar-uploader":show-upload-list="false":before-upload="beforeUpload":customRequest="chooseImg"
><imgv-if="form.snapshotJson":src="form.snapshotJson"alt="avatar"/><div v-else><a-icon :type="loading ? 'loading' : 'plus'" /><div class="ant-upload-text">Upload</div></div>
</a-upload><a-modaltitle="裁剪图片":visible="visible":width="800":confirm-loading="confirmLoading"@ok="cutImg"@cancel="() => {visible = false;}"
><div style="width:100%;height:450px"><vue-cropperautoCrop:img="originImg"ref="cropper"centerBoxfixed:canMove="false":fixedNumber="[20, 13]"/></div>
</a-modal>

我们页面的逻辑是点击upload，选择图片，弹出裁剪的模态框，在模态框中裁剪，按确定按钮之后完成裁剪，回显裁剪之后的图片。

我们首先是用<a-upload>去拿到本地的地址，然后用<vue-cropper>去裁剪图片，显示到<a-upload>中。

那我们需要下面几个方法

1.首先需要工具方法，将本地图片转为一个base64的字符串


getBase64(img, callback) {const reader = new FileReader();reader.addEventListener("load", () => callback(reader.result));reader.readAsDataURL(img);
},

2.上传图片的时候需要判断确实是一张图片

beforeUpload(file) {const isJpgOrPng =file.type === "image/jpeg" || file.type === "image/png";if (!isJpgOrPng) {this.$message.error("只能上传图片！");}return isJpgOrPng;
},

3.点击upload触发的方法，显示模态框，调用getBase64()并将返回的base64字符串赋值给originImg，也就是未裁剪的图片地址。

chooseImg(obj) {this.visible = true;this.getBase64(obj.file, imageUrl => {this.originImg = imageUrl;});
},

4.确认裁剪，调用裁剪组件的getCropData()方法返回裁剪后的数据赋值给回显的图片。

cutImg() {this.$refs.cropper.getCropData(data => {this.form.snapshotJson = data;});this.visible = false;
},

总结

以上就是使用方法了

Vue中图片裁剪的实现相关推荐

史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网代码拷贝最后基于vue的图片裁剪vue-cropper 最 ...
vue中图片上传及回显
在vue中图片上传到服务器下指定路径,并实现根据图片路径调取后台接口返回图片流在vue页面展示图片一.图片上传 1.前台上传 <template slot-scope="scope& ...
Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器
前言您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
vue实现图片裁剪后上传
一.背景目前负责的系统(商城后台管理系统)里面有这么一个需求,为了配合前台的展示,上传的商品图片比较必须是1:1的正方形.(其它地方有时会有5:4或者16:9的需求,但较少).所以需要对上传的图片先 ...
基于vue的图片裁剪框的实现
1.基于vue建设一个裁剪框全文附录我会放到最后,有需要的小伙伴自取 ## 1.1在没有添加图片的时候显示如上图的css样式 <label class="h-photo-left&q ...
apiCloud中图片裁剪模块FNImageClip的使用
思路 1.获取需裁剪图片的地址 2.跳转到裁剪页面 3.裁剪成功返回新图片地址 4.替换原有图片地址增加修饰和事件 str += '<li class="tu image" ...
Vue中图片加载问题总结
1. favicon.ico 504问题注意,由于更改的是配置文件,所以需要重新npm run dev运行该项目. 2. 图片引用加载不出来 vue中常见的两种图片引用方式如下: 直接img标签的s ...
vue中图片引入问题以及实现openlayers地图标记
最近因为工作需要,在研究openlayers地图的使用,但是卡在了地图标记这块,不论我怎么尝试,标记就是不会显示在地图上,反反复复看了很多博客,也研究了文档,都觉得没有问题,也用html尝试了,标记可 ...
基于vue的图片裁剪插件vue-cropper
我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了.有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决.先介绍吧.效果是下面这样的, 我这里采用了4 ...
vue做图片裁剪——vue-cropper
这里使用的是vue-cropper 官方文档以及案例在这里先安装 npm install vue-cropper 裁剪图片组件注意事项: 1.代码中设置的是只有正确的url是才展示,裁剪组件 2 ...

Vue中图片裁剪的实现

vue-cropper

安装

在入口文件中引用

使用

和ant vue 一起使用

总结

Vue中图片裁剪的实现相关推荐

最新文章

热门文章