vue-image-crop基于Vue的移动端图片裁剪组件示例


Posted in Javascript onAugust 28, 2018

本文介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例,分享给大家,具体如下:

代码地址:https://github.com/jczzq/vue-image-crop

vue-image-crop

基于Vue的移动端图片裁剪组件

组件使用URL.createObjectURL()等新特性,使用前注意兼容问题。IE >= 10

注意:该组件适用于 PC 端,不推荐手机端使用。

功能预览

vue-image-crop基于Vue的移动端图片裁剪组件示例

vue-image-crop基于Vue的移动端图片裁剪组件示例

快速开始

安装Node >= 8.9.0(推荐LTS = 8.11.0

# 安装 vue-cli 3.x
npm install -g @vue/cli

cd vue-image-crop
npm install
npm run dev

启动开发模式即可定制功能

构建

npm run build

build之后会重新生成lib文件夹

API

props

属性名 类型 默认值 说明
value Object {} 裁剪后的图片对象;必传;可使用v-model绑定
proportion Object { w: 2, h: 1 } 图片宽高比例对象;非必传;用于动态计算宽高比例,所以w和h两个属性没有固定值
quality Number 0.92 清晰度;非必传;HTMLCanvasElement.toDataURL()的第二个参数
hasRemove Boolean false 是否显示移除按钮;非必传;列表中使用时可能会用到
skipCrop Boolean false 是否直接上传;非必传;设置为true的时候图片将不会裁剪直接返回
config Object { size: 1200, isSlice: true, path: null } 配置对象;此对象不传有默认值,若传时对象里的每个属性都必须传;size:图片最大宽度(px),isSlice:是否需要裁剪,path:显示图片时的路径,path参数将直接与图片id拼接(path + id)

events

事件名 说明 回调参数
remove 移除按钮被点击时触发 -
change 改变选中图片时触发 event.target.files[0],新文件
submit 图片操作完成时触发 当前裁剪后的图片对象
cancel 图片操作取消时触发 -

示例代码

<template>
  <div class="ctnr">
    <p>常规用法</p>
    <m-image-crop class="mic mic1"
           v-model="img"></m-image-crop>

    <p>调整比例</p>
    <m-image-crop class="mic mic2"
           v-model="img2"
           :proportion="{ w: 100, h: 35 }"></m-image-crop>

    <p>列表</p>
    <div class="list">
      <div class="item"
         v-for="(item, index) in imgList"
         :key="item.id">
        <m-image-crop class="mic"
               has-remove
               :value="item"
               :proportion="{ w: 1, h: 1 }"
               @remove="removeHandle(index)"></m-image-crop>
      </div>
      <div class="item add"
         @click="addHandle">添加图片</div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      img: {},
      img2: {},
      imgList: []
    };
  },
  methods: {
    addHandle() {
      this.imgList.push({});
    },
    removeHandle(index) {
      this.imgList.splice(index, 1);
    }
  }
};
</script>

<style lang="less">
html,
body {
  margin: 0;
}
.ctnr {
  height: 100vh;
  .mic {
    border: 1px dotted #4fc08d;
  }
  .mic1 {
    width: 200px;
    height: 100px;
  }
  .mic2 {
    width: 100vw;
    height: 35vw;
  }
  .list {
    font-size: 0;
    .item {
      box-sizing: border-box;
      font-size: 14px;
      vertical-align: middle;
      display: inline-block;
      border: 1px dotted #4fc08d;
      width: 33.33vw;
      height: 33.33vw;
    }
    .add {
      text-align: center;
      line-height: 33.33vw;
    }
  }
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
node.js中 stream使用教程
Aug 28 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
Js面试算法详解
Apr 08 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 #Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 #Javascript
对vux点击事件的优化详解
Aug 28 #Javascript
使用D3.js构建实时图形的示例代码
Aug 28 #Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 #Javascript
AngularJS 事件发布机制
Aug 28 #Javascript
vue.js 添加 fastclick的支持方法
Aug 28 #Javascript
You might like
php 函数使用方法与函数定义方法
2010/05/09 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
php常用表单验证类用法实例
2015/06/18 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python 系统调用的实例详解
2017/07/11 Python
python实现微信小程序自动回复
2018/09/10 Python
python实现简单名片管理系统
2018/11/30 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
思想政治自我鉴定
2013/10/06 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
美国留学经济担保书
2014/05/20 职场文书
规范化管理年活动总结
2014/08/29 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python