vue 图片剪裁插件

最近在用Vue做后台管理系统，需要用到图片剪裁的插件。之前用的element-ui的upload组件，但是这个不支持剪裁，在网上找了几个插件，最后决定用vue-image-crop-upload这个插件。还挺好用的，但是有一个问题，就是他不能按尺寸比例去剪裁，只能写剪裁后的图片的固定的宽和高才行。

view视图这样写：

其中width=320 height="180"就是固定的尺寸。

<el-form-item label="封面图"prop="coverImg"hide-required-asterisk="false"><my-upload ref="uploader" field="file"enctype="multipart/form-data":langExt="zh"@crop-success="cropSuccess"@crop-upload-success="cropUploadSuccess"@crop-upload-fail="cropUploadFail"v-model="show":withCredentials="withCredentials":no-circle="true":width="320":height="180":url="uploadImgUrl":params="params":headers="headers"img-format="png"></my-upload><el-button size="small"type="primary"@click="toggleShow">点击上传</el-button><div class="">只能上传jpeg/jpg/png/gif格式的图片，且不超过5M</div><img class="coverImg":src="detailRuleForm.coverImg"></el-form-item>

data中代码：

data(){return{show: false,withCredentials: true,params: {size: 5 * 1024 * 1024},headers: {smail: '*_~'},zh: {preview: '预览',}}}

剪裁，剪裁成功，剪裁失败的函数代码：

toggleShow () {this.show = !this.show;},/*** crop success** [param] coverImg* [param] field*/cropSuccess (coverImg, field) {// console.log('-------- crop success --------', coverImg + '---', field);this.detailRuleForm.coverImg = coverImg;},/*** upload success** [param] jsonData  server api return data, already json encode* [param] field*/cropUploadSuccess (jsonData, field) {console.log('-------- upload success --------', jsonData);// console.log('field: ' + field);if (jsonData.retCode === "00000") {this.detailRuleForm.coverImg = jsonData.vo.uploadUri//下面这个判断条件就是当上传成功后，不用用户手动再去关闭弹框，上传成功之后代码把其关闭if(this.$refs.uploader){this.$refs.uploader.off()}}},/*** upload fail** [param] status    server api return error status, like 500* [param] field*/cropUploadFail (status, field) {console.log('-------- upload fail --------');console.log(status);console.log('field: ' + field);}

链接如下：

https://www.npmjs.com/package/vue-image-crop-upload

效果图如下：

后来又找了一下，还有一个插件也比较火：

https://github.com/xyxiao001/vue-cropper

在此记录下，希望大家也能给我推荐比较实用或比较火的剪裁的插件。

vue 图片剪裁插件相关推荐

html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...
html图片自动剪裁,jQuery简单且功能强大的图片剪裁插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. croppe ...
php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api
图片剪裁插件Image Cropper使用方法引入必要的js和css核心文件构建html,可以将图片或canvas直接包裹到一个块级元素中初始化插件,可以使用$.fn.cropper方法来初始化 ...
vue 图片剪辑_一个简单的Vue图片剪辑插件
vue 图片剪辑 Vue-Crpopper (vue-crpopper) A simple picture clipping plugin for vue. 一个简单的Vue图片剪辑插件. 安装 (i ...
cropper.js 图像旋转问题_JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs...
介绍 cropperjs是一款基于JavaScript的网页端图片裁剪插件,可能相对于图片预览来说,图片的裁剪使用场景貌似并不是很多,但是图片预览插件又要比裁剪插件容易找到,而且从实现难度上来说也不及 ...
jQuery 图片剪裁插件初探之 Jcrop
主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...
vue图片查看插件v-viewer使用
使用方法: 1. 安装依赖: npm install v-viewer 2.1 main.js中全局引入插件及样式: import Viewer from 'v-viewer' import 'vie ...
Vue图片裁剪插件vue-cropper的使用，应用场景用户上传头像
文章目录前言一.安装和引入二.Events And Methods 三.简单使用四.实际应用(含本地图片下载) 前言一个简单的用户上传头像的例子功能:选择图片,设置裁剪位置,实时预览一. ...
cropper简单且功能强大的图片剪裁jQuery插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropper提供了大量的参数 ...
Vue常用的插件集合
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...

vue 图片剪裁插件

vue 图片剪裁插件相关推荐

最新文章

热门文章