基于 Vue的图片裁剪插件

dance 发布于2019-08-21 11:41 / 3404人阅读

摘要：预览项目地址一些想法网上看了看基于的图片裁剪的插件很少，刚刚好项目需要使用到图片裁剪，于是便有了这个插件的诞生。

vue-crpopper

预览
项目地址

一些想法

网上看了看基于vue的图片裁剪的插件很少，刚刚好项目需要使用到图片裁剪，于是便有了这个插件的
诞生。

实现的原理

通过canvas生成新的图片，可以上传到后台保存。

效果图

安装 npm install vue-cropper 使用 import VueCropper from vue-cropper

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址 \|\| base64 \|\| blob
outputSize	裁剪生成图片的质量	1	0.1 - 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg \|\| png \|\| web

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

this.$refs.cropper.startCrop() 开始截图

this.$refs.cropper.stopCrop() 停止截图

this.$refs.cropper.clearCrop() 清除截图

this.$refs.cropper.getCropData() 获取截图信息

GPU云服务器云服务器 vue插件图片裁剪图片裁剪比例图片裁剪价格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86997.html

立志做一个最好用的移动端图片裁剪插件

摘要：基于的图片压缩裁剪插件功能说明图片压缩，图片裁剪，图片压缩，图片裁剪，，解决了部分机型方向不对的问题，同时可以对图片进行尺寸和质量的压缩效果演示调试模式下或者手机打开本地运行使用本项目的文件需要引入在需要使用的页面直接引入 vue-image-cropper 基于vue的图片压缩裁剪插件 1.功能说明图片压缩，图片裁剪，vue图片压缩，vue图片裁剪，vue-image-croppe...

android_c 2019-08-20 17:39 评论0 收藏0
react-core-image-upload 一款轻量级图片上传裁剪插件

摘要：在不久前，我们把发布了。这次我们保持了完整的迁移到了上。支持了定义，支持了的自定义事件，更新了更加详细的文档。如果你需要自定义裁剪弹窗的的样式，你可以自己写进行覆盖 showImg(https://segmentfault.com/img/bVKj4B?w=1600&h=900); 在不久前，我们把vue-core-image-upload 发布了2.0 。这次我们保持了完整的api迁...

Lavender 2019-08-21 11:31 评论0 收藏0
【收藏】2019年最新Vue相关精品开源项目库汇总

摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

williamwen1986 2019-08-23 14:50 评论0 收藏0