A simple picture clipping plugin for vue

Last update: Jun 27, 2022

需要使用外层容器包裹并设置宽高

使用 注意: 需要关掉本地的mock服务, 不然图片转化会报错

组件内使用
import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper,
},

main.js里面使用
import VueCropper from 'vue-cropper' 

Vue.use(VueCropper)

cdn方式使用
<script src="//cdn.jsdelivr.net/npm/vue-cropp[email protected]/dist/index.js"></script>
Vue.use(window['vue-cropper'].default)
nuxt 使用方式
if(process.browser) {
  vueCropper = require('vue-cropper')
  Vue.use(vueCropper.default)
}

<vueCropper
  ref="cropper"
  :img="option.img"
  :outputSize="option.size"
  :outputType="option.outputType"
></vueCropper>

vue-cropper

一个优雅的图片裁剪插件

预览 english

vue-cropper 相关文章参考。

shn_ui - vue-cropper 作者 野宁新之助

vue全家桶开发管理后台—裁切图片 作者: 麻球科技-菅双鹏

Vue-cropper 图片裁剪的基本原理 作者: 龙恩0707

关于昵称和头像的总结(模仿微信) 作者: 秋晨光

vue-cropper-h5 作者:居里栈栈

vue-cropper 交流。

有什么意见,或者bug 或者想一起开发vue-cropper, 或者想一起开发其他插件

vue-cropper

安装

npm install vue-cropper

yarn add vue-cropper

如果你没有使用npm

在线例子

服务器渲染 nuxt 解决方案 设置为ssr: false

module.exports = {
  ...
  build: {
    vendor: [
      'vue-cropper
    ...
    plugins: [
      { src: '~/plugins/vue-cropper', ssr: false }
    ]
  }
}

目前还不知道什么原因项目里面开启mock 会导致file报错, 建议使用时 关掉mock

名称 功能 默认值 可选值
img 裁剪图片的地址 url 地址 || base64 || blob
outputSize 裁剪生成图片的质量 1 0.1 - 1
outputType 裁剪生成图片的格式 jpg (jpg 需要传入jpeg) jpeg || png || webp
info 裁剪框的大小信息 true true || false
canScale 图片是否允许滚轮缩放 true true || false
autoCrop 是否默认生成截图框 false true || false
autoCropWidth 默认生成截图框宽度 容器的80% 0~max
autoCropHeight 默认生成截图框高度 容器的80% 0~max
fixed 是否开启截图框宽高固定比例 true true | false
fixedNumber 截图框的宽高比例 [1, 1] [宽度, 高度]
full 是否输出原图比例的截图 false true | false
fixedBox 固定截图框大小 不允许改变 false true | false
canMove 上传图片是否可以移动 true true | false
canMoveBox 截图框能否拖动 true true | false
original 上传图片按照原始比例渲染 false true | false
centerBox 截图框是否被限制在图片里面 false true | false
high 是否按照设备的dpr 输出等比例图片 true true | false
infoTrue true 为展示真实输出图片宽高 false 展示看到的截图框宽高 false true | false
maxImgSize 限制图片最大宽度和高度 2000 0-max
enlarge 图片根据截图框输出比例倍数 1 0-max(建议不要太大不然会卡死的呢)
mode 图片默认渲染方式 contain contain , cover, 100px, 100% auto

内置方法 通过this.$refs.cropper 调用

this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop 自动生成截图框函数
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度

图片加载的回调 imgLoad 返回结果success, error

获取截图信息

this.$refs.cropper.cropW 截图框宽度

this.$refs.cropper.cropH 截图框高度

// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})

// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})

### Description of the default rendering mode of the image
Image layout mode mode achieves the same effect as css background
Contain Centered layout Default does not scale Ensure the image is inside the container mode: 'contain'
Cover stretch layout fill the entire container mode: 'cover'
If only one value is given, this value will be used as the width value and the height value will be set to auto. mode: '50px'
If two values are given, the first one will be the width value and the second will be the height value. mode: '50px 60px'

### 预览
``` html
@realTime="realTime"
// Real time preview function
realTime(data) {
  var previews = data;
  var h = 0.5;
  var w = 0.2;

  this.previewStyle1 = {
    width: previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: h
  };

  this.previewStyle2 = {
    width: previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: w
  };

  固定为100宽度
  this.previewStyle3 = {
    width: previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: 100 / preview.w
  };

  固定为100高度
  this.previewStyle4 = {
    width: previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: 100 / preview.h
  };
  this.previews = data;
},


<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
    'margin': '5px'}">
  <div :style="previews.div">
    <img :src="option.img" :style="previews.img">
  </div>
</div>
<p>中等大小</p>
<div :style="previewStyle1"> 
  <div :style="previews.div">
    <img :src="previews.url" :style="previews.img">
  </div>
</div>

<p>迷你大小</p>
<div :style="previewStyle2"> 
  <div :style="previews.div">
    <img :src="previews.url" :style="previews.img">
  </div>
</div>
=

图片移动回调函数 @imgMoving

data type
{
   moving: true, // moving 是否在移动
   axis: {
    x1: 1, // 左上角
	 x2: 1,// 右上角
	 y1: 1,// 左下角
	 y2: 1 // 右下角
   }
 }

截图框移动回调函数 @cropMoving

data type
{
   moving: true, // moving 是否在移动
   axis: {
    x1: 1, // 左上角
	 x2: 1,// 右上角
	 y1: 1,// 左下角
	 y2: 1 // 右下角
   }
 }

更新日志

0.56

修复绑定事件判断出错的问题
修复组件移除没有解绑滚动事件的问题

0.55

修复 ios 版本小于 13.4没有处理图片旋转的 bug

0.54

去除 log 信息
修复 pc safari低版本问题

0.53

因为 chrome81 内核版本和 ios13.5 版本修复了图片旋转的 bug
插件在新版浏览器默认不处理旋转了,低版本浏览器自动处理

https://www.chromestatus.com/feature/6313474512650240

0.52

撤回最小弹框属性, 存在弹框拖拽坐标判断的 bug

0.51

更新裁剪框最小属性, 限制最小区域,可传1以上的数字和字符串,限制长宽都是这么大 也可以传数组[90,90] 
limitMinSize:  [Number, Array, String]

0.50

支持图片清空 修复 ie11 ie10 不能使用问题 修复 URL.createObjectURL 创建后没有销毁的 bug 添加截图框修改触发事件 this.$emit('change-crop-size', { width: this.cropW, height: this.cropH })

0.49

修复滚轮默认事件问题 修复html静态文件引入事件触发问题

0.48

修复mode 属性 contain 和cover的显示bug问题

修复ios 下面base64图片跨域显示问题

0.47

修复第一次不触发预览的问题 新增加图片渲染mode功能

0.46

修复图片旋转bug 修复显示的一些bug

0.45

添加倍数使用 enlarge 可以输出裁剪框等比例图片;

感谢来自于 的贡献 添加预览框各种比例, 和修复图片截图小数问题

0.44

修复引入方式的问题

组件内使用
import { VueCropper }  from vue-cropper 
components: {
  VueCropper,
},

main.js里面使用
import VueCropper from vue-cropper 

Vue.use(vueCropper)

cdn方式使用
<script src="vuecropper.js"></script>
Vue.use(window['vue-cropper'])

v0.43

剥离exif的依赖库, 添加exfi-min.js减小代码体积 45.9k => 37k build 升级webpack4 升级

添加vue install 方法  =》  npm: Vue.use(VueCropper)  web: Vue.use(window['vue-cropper'])

v0.42

修复截图框因为去除小数点的引起的问题

v0.41

修复截图框边界问题

v0.40

修复orientation的处理方式 感谢 Felipe Mengatto的贡献

v0.39

修复orientation值不同带来的问题 感谢 Felipe Mengatto的贡献

v0.38

修改坐标反馈问题

v0.37

修复centerBox 的截图超出1px问题
添加截图  图片移动触发事件

v0.36

修复旋转自动生成截图框的错误
修改autocrop  可以动态生成截图框

v0.35

修复其他图片没有压缩的问题

v0.34

修改maxImgSize为2000

v0.33

maxImgSize 限制图片最大宽度和高度 默认为2000px

v0.32

新增截图框信息展示
infoTrue  true 为展示真实输出图片宽高  false 展示看到的截图框宽高

v0.30

新增获取图片坐标函数  this.$refs.cropper.getImgAxis()
新增获取截图框坐标函数  this.$refs.cropper.getCropAxis()
新增对高清设备的兼容  high
新增截图框限制在图片以内的功能  centerbox
新增自动生成截图框函数 this.$refs.cropper.goAutoCrop

v0.29

新增图片加载的回调 imgLoad 返回结果success, error

v0.28

修复截图框固定 截图框会影响原图移动 缩放

v0.27

鼠标缩放问题优化 img max-width 样式优化 新增属性
canMove 是否可以移动图片 默认为是 canMoveBox 是否可以移动截图框 默认为是 original 是否按图片原始比例渲染 默认为否

v0.26

修复火狐浏览器 鼠标缩放问题

v0.25

修复图片有可能不展示

v0.24

修复ios拍照旋转 截图问题 添加自动修复图片 截图预览代码变更, 修改默认上传图片为blob预览

realTime (data) {
  this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
    'margin': '5px'}">
  <div :style="previews.div">
    <img :src="previews.url" :style="previews.img">
  </div>
</div>

v0.23

小优化

v0.22

新增修改图片大小函数 通过this.$refs.cropper.changeScale 调用

v0.21

新增固定截图框大小fiexdBox(注: 最好搭配自动生成截图框使用)

v0.20

新增输出原图比例截图 props名full, 修复缩放图片过大灵敏度问题

v0.19

新增图片旋转 修复mac滚轮过度灵敏

this.$refs.cropper.rotateRight() // 向右边旋转90度
this.$refs.cropper.rotateLeft() // 向左边旋转90度

v0.18

修复默认生成截图框超过容器错误

v0.17

修复blob数据获取错误

v0.15

添加手机端手势缩放

canScale: true

v0.13

添加预览

@realTime="realTime"
// Real time preview function
realTime (data) {
  this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
    'margin': '5px'}">
  <div :style="previews.div">
    <img :src="option.img" :style="previews.img">
  </div>
</div>

GitHub

https://github.com/xyxiao001/vue-cropper
Comments
  • 1. vite 启动报错

    node_modules/vue-cropper/dist/vue-cropper.es.js:1:55: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "createElementBlock" node_modules/vue-cropper/dist/vue-cropper.es.js:1:99: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "createElementVNode" node_modules/vue-cropper/dist/vue-cropper.es.js:1:123: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "normalizeStyle" node_modules/vue-cropper/dist/vue-cropper.es.js:1:178: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "normalizeClass"

    Reviewed by kongDespair at 2021-08-12 04:09
  • 2. Safari crashed on high resolution image

    Hello, I am using this library to crop an image but I am facing an issue while I try to load the high-resolution image.

    Can you suggest me any solution that I can implement?

    Reviewed by chiragparekh at 2018-02-03 06:24
  • 3. CORS error

    https://graphotate-dev.s3.eu-west-2.amazonaws.com/datasets/2/annotation_classes/bottle.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIQJH3IXHGCS6MBBA%2F20181017%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20181017T114353Z&X-Amz-Expires=604800&X-Amz-Signature=483988697fa952cb150632065e70283771c398e1b2b70a6c4e6c2dd022dfb930&X-Amz-SignedHeaders=host

    Access to image has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    Sometimes, I am getting this when I have changed the image url.

    This image url works when I open it separately and other img tags.

    Any idea on this?

    Reviewed by batmanhit at 2018-10-17 11:51
  • 4. Image Orientation Correction - (Code and Images - Test)

    Hello, how are you? It's me again haha. I noticed that when we send images to the component, which has orientation problems, the component can not behave correctly. I ran some tests and put together a small solution to correct the display of the images. Would you like me to create a Pull Request with or do you implement the codes ?!

    I'll leave here the test code I've assembled, with the fixes for each guideline that is not working. I'll also leave a .zip folder with the test images so you can simulate. Link Complete Code Test: https://codeshare.io/2K78XN Link Zip Folder (All Images Test): https://goo.gl/URrABW

    ...
        checkedImg() {
          if (this.img === "") return;
    			this.rotate = 0			
          this.loading = true;
          this.scale = 1;
          this.clearCrop();
          let canvas = document.createElement("canvas");
          let img = new Image();
          let rotate = 0
    
          img.onload = () => {
            if (this.img === '') {
              this.$emit("imgLoad", "error");
              return false
            }
            let width = img.width;
            let height = img.height;
            let ctx = canvas.getContext("2d");
            let dw = 0 
            let dh = 0
            let x = 0
            let y = 0
            ctx.save();
            exif.getData(img, () => {
              exif.getAllTags(img);
    // comment init new code
              this.orientation = exif.getTag(img, "Orientation");
              switch (this.orientation) {
                case 6:
                  rotate = 1;
                  break;
                case 8:
                  rotate = -1;
                  break;
                // case 3:
                //   rotate = 3;
                  break;
                default:
                  rotate = 0;
              }
              let max = this.maxImgSize
              // if (rotate === 0 && width < max & height < max ) {
              //   this.imgs = this.img;
              //   return;
              // }
              if (width > max) {
                height = height / width * max
                width = max
              }
    
              if (height > max) {
                width = width / height * max
                height = max
              }
              console.log('rotate', rotate);
              switch (rotate) {
                case 0:
                  canvas.width = width;
                  canvas.height = height;
                  dw = width
                  dh = height
    
                  if (this.orientation === 2) {
                    // horizontal flip
                    ctx.translate(width, 0);
                    ctx.scale(-1, 1);
                  }
    
                  if (this.orientation === 4) {
                    // vertical flip
                    ctx.translate(0, height);
                    ctx.scale(1, -1);
                  }
    
                  if (this.orientation === 5) {
                    // vertical flip + 90 rotate right
                    canvas.height = width;
                    canvas.width = height;
    
                    ctx.rotate(0.5 * Math.PI);
                    ctx.scale(1, -1);
                  }
    
                  if (this.orientation === 7) {
                    // horizontal flip + 90 rotate right
                    canvas.height = width;
                    canvas.width = height;
    
                    ctx.rotate(0.5 * Math.PI);
                    ctx.translate(width, -height);
                    ctx.scale(-1, 1);
                  }
    
                  if (this.orientation === 3) {
                    canvas.height = height;
                    canvas.width = width;
    
                    //180 graus
                    ctx.translate(width / 2, height / 2);
                    ctx.rotate(180 * Math.PI / 180);
                    ctx.translate(-width / 2, -height / 2);
                  }
    
                  break;
                case 1:
                case -3:
                  // 旋转90度 或者-270度 宽度和高度对调
                  canvas.width = height;
                  canvas.height = width;
                  ctx.rotate(rotate * 90 * Math.PI / 180);
                  dw = width
                  dh = height
                  y = -height
                  break;
                case 2:
                case -2:
                  canvas.width = width;
                  canvas.height = height;
                  ctx.rotate(rotate * 90 * Math.PI / 180);
                  dw = width
                  dh = height
                  x = -width
                  y = -height
                  break;
                case 3:
                case -1:
                  canvas.width = height;
                  canvas.height = width;
                  ctx.rotate(rotate * 90 * Math.PI / 180);
                  dw = width
                  dh = height
                  x = -width
                  y = 0
                  break;
                default:
                  canvas.width = width;
                  canvas.height = height;
                  dw = width
                  dh = height
              }
    // comment end new code
              ctx.drawImage(img, x, y, dw, dh);
              ctx.restore();
              canvas.toBlob(
                blob => {
                  let data = URL.createObjectURL(blob)
                  this.imgs = data
                },
                "image/" + this.outputType,
                1
              );
            });
          };
          img.onerror = () => {
            this.$emit("imgLoad", "error");
          };
          img.crossOrigin = "*";
          img.src = this.img;
        },
    ...
    
    Reviewed by felipemengatto at 2018-09-12 00:44
  • 5. 设置vue-cropper有点问题,能不能帮我看下是哪里出现的问题?

    image

    <template>
      <div class="edit-teacher-container">
            <Card>
                    <div slot="title">
                        <Button type="text" icon="reply" @click.native="returnTeacherPage">返回</Button>
                    </div>          
                    <Button slot="extra" type="primary" icon="plus-round" @click.native="saveTeacher">保存</Button>
                    <Row :gutter="16">
                        <Col span="10">
                            <Card style="height:500px">
                                <p slot="title">
                                    <Icon type="person"></Icon>
                                    设置老师头像
                                </p>
                                    <Button type="primary" @click="modal1 = true">上传文件</Button>
    
    
                            </Card>
                        </Col>
                    </Row>
            </Card>
    
            <Modal
                v-model="modal1"
                title="设置老师头像"
                width=800
                @on-ok="ok"
                @on-cancel="cancel">
                <vueCropper
                    ref="cropper2"
                    :img="example2.img"
                    :outputSize="example2.size"
                    :outputType="example2.outputType"
                    :info="example2.info"
                    :canScale="example2.canScale"
                    :autoCrop="example2.autoCrop"
                    :autoCropWidth="example2.width"
                    :autoCropHeight="example2.height"
                    :fixed="example2.fixed"
                    :fixedNumber="example2.fixedNumber"
                ></vueCropper>
        </Modal>
      </div>
    </template>
    <script>
    import vueCropper from 'vue-cropper'
    
    
    export default {
        components:{
            vueCropper
        },
    data () {
        return {
            modal1: false,
            example2: {
    				img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
    				info: true,
    				size: 1,
    				outputType: 'jpeg',
    				canScale: false,
    				autoCrop: true,
    				// 只有自动截图开启 宽度高度才生效
    				autoCropWidth: 300,
    				autoCropHeight: 300,
    				// 开启宽度和高度比例
    				fixed: true,
    				fixedNumber: [1, 1]
    			}
        }
    }
    </script>
    
    
    
    Reviewed by zhangwei900808 at 2017-11-21 01:58
  • 6. 图片加载不成功 老是跨域, 但服务端设置了跨域,烦请看看

    `

    `

    Reviewed by GrowingMonkey at 2018-10-26 08:11
  • 7. 如果容器不够大,裁剪的对象可不可以是原图而不是缩放后的图片

    比如我要裁剪一个1000 * 1000的图得到一个750 * 650的图片,我外部的容器只有500 * 400,这样自动生成的裁剪框大概只有400多 * 300多,裁剪出来的图片也就是裁剪框的大小,我使用了enlarge放大到750 * 650,但是enlarge只能放大图片,原来的清晰度已经丢失。 就是我希望的是裁剪的图片裁剪的图片按比例缩放,裁剪框也按比例缩放,裁剪是以原图作为操作,而不是缩放后的图片。

    Reviewed by wangshantao at 2020-07-15 01:16
  • 8. build(deps): bump eventsource from 1.0.7 to 1.1.1 in /example

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-01 00:49
  • 9. 当裁剪图片小于裁剪框时,在导出 jpg 格式的时候,透明区域的填充颜色是否可以支持自定义,现在默认是黑的

    使用场景

    裁剪框固定1:1,裁剪图片,因为需要可以展示全图,所以当长方形图片进行裁剪时,会缩放图片,左右留白

    复现步骤

    裁剪框调整至如下 image

    导出格式选择 jpeg, 使用 getCropData 或者 getCropBlob 获得图片

    现有问题

    查看预览时可以发现获得的图片透明部分填充的颜色是黑色 image

    希望效果

    是否可以增加一个自定义参数,设定默认的填充颜色

    应该可以在这里实现,给 canvas 设定一个默认背景色 https://github.com/xyxiao001/vue-cropper/blob/713cd62cee57fa9e40548e8301c27918b7e6f53e/src/vue-cropper.vue#L1345-L1349

    Reviewed by Eurkidu at 2022-05-23 11:33
  • 10. build(deps): bump async from 2.6.1 to 2.6.4 in /example

    Bumps async from 2.6.1 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 15:16
Apr 28, 2022
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more

vue-picture-input Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. Installation npm

Jun 23, 2022
A simple and elegant avatar cropping and upload plugin.
A simple and elegant avatar cropping and upload plugin.

A simple and elegant avatar cropping and upload plugin.

Jun 7, 2022
a vue plugin for image to crop and upload
a vue plugin for image to crop and upload

Vue-Core-Image-Upload a vue plugin for image upload and crop ( Support ?? IE10+) 查看文档 English Document if you use vue.js(<=2.0), you should go here.Or

Jun 29, 2022
A mobile image cropping upload plugin for Vue----vue的移动端头像裁剪插件
A mobile image cropping upload plugin for Vue----vue的移动端头像裁剪插件

vue-quick-cropper A mobile image cropping upload plugin for Vue. (styles like WeChat, single finger moving two-finger zoom)--vue的移动端图片裁剪上传插件(样式仿照微信,可单

Feb 24, 2021
A pipeline component like jenkins blue ocean plugin.
A pipeline component like jenkins blue ocean plugin.

vue-pipeline One easy-to-use component to show beautiful responsive timeline like jenkins blue ocean plugin. 中文 To get started, check out: Demo LICENS

Jun 27, 2022
💇‍♀️ A simple and elegant mobile image crop upload component for Vue 2.x | 简洁易用的 vue 移动端图片裁剪上传组件
💇‍♀️ A simple and elegant mobile image crop upload component for Vue 2.x | 简洁易用的 vue 移动端图片裁剪上传组件

vue-slim-cropper English | 简体中文 ?? Example Demo Demo Source Code ?? QuickStart Install yarn add vue-slim-cropper # OR npm i -S vue-slim-cropper Import

Jun 2, 2022
A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.

vue-croppa A simple straightforward customizable mobile-friendly image cropper for Vue 2.0. Features Straightforward: What you see is what you get Hig

Jun 29, 2022
A simple drawer component based on Vue.js

Ch-Drawer A simple drawer component based on Vue.js and used on Web docs here Install npm install ch-drawer

May 4, 2020
A dead-simple gravatar component for VueJS

A dead-simple gravatar component for VueJS

May 3, 2022
A simple tool for cropping images from an URL, your clipboard, or your disk.
A simple tool for cropping images from an URL, your clipboard, or your disk.

It was made as an alternative to Avatar Cropper to better suit my UI tastes and adapt the tool to my needs.

Jun 30, 2022
A simple image pop-up for keeping image previewing in same ratio

vue-mobile-image-uncover The simplest solution for putting varius ratio images, which you don't want to break your layout. Live Demo (WIP) Usage impor

Jul 29, 2020
Viteshot 📸 is a fast and simple component screenshot tool based on Vite.
Viteshot 📸 is a fast and simple component screenshot tool based on Vite.

Viteshot ?? is a fast and simple component screenshot tool based on Vite.

Jun 28, 2022
A simple editor for the Zdog 3D engine
A simple editor for the Zdog 3D engine

Zdog Editor A simple editor for the Zdog 3D engine. Playable demo here. Project setup npm install Compiles and hot-reloads for development npm run se

Jun 8, 2022
Pencil.js ❤️ Vue - Build reactive 2D graphics scene in your Vue project
Pencil.js ❤️ Vue - Build reactive 2D graphics scene in your Vue project

vue-pencil.js Pencil.js ❤️ Vue - Build reactive 2D graphics scene in your Vue project Install npm install vue-pencil.js You need to install vue and p

Jun 14, 2022
Toast UI Image Editor for Vue

Vue wrapper for TOAST UI Image Editor This is Vue component wrapping TOAST UI Image Editor. ?? Table of Contents Collect statistics on the use of open

May 8, 2022
Vue wrapper for croppie
Vue wrapper for croppie

#BlackLivesMatter! https://blacklivesmatter.com/ Black Lives Matter Movement Resources VueCroppie VueCroppie is a Vue 2 wrapper for Croppie a beautifu

Jun 20, 2022
The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design

Documentation / Examples / Sandbox WARNING! If you still use the beta version (< 1.0.0) read the migration guide. ?? HEADS UP! You're currently lookin

Jun 27, 2022
Crop directive for Vue.js

VueCrop Crop events plugin for Vue.js 1.0 This is a directive for Jcrop 2.0.0. See a live demo here. Usage Install via npm Available through npm as vu

Dec 13, 2021