npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-cropper-cailw

v0.3.0

Published

A simple Vue picture clipping plugin

Downloads

2

Readme

vue-cropper

一个优雅的图片裁剪插件

预览 english

vue-cropper

安装 npm install vue-cropper

使用 import VueCropper from vue-cropper

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

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

this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
获取截图信息

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)  
})

更新日志

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>