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

前赴后继
• 阅读 5252

vue-image-cropper 基于vue的图片压缩裁剪插件

1.功能说明

图片压缩,图片裁剪,vue图片压缩,vue图片裁剪,vue-image-cropper,解决了部分机型方向不对的问题,同时可以对图片进行尺寸和质量的压缩

2.效果演示(chrome调试模式下或者手机打开)

3.本地运行

git clone https://github.com/Q956164483/vue-image-cropper.git
cd vue-image-cropper
yarn
yarn run dev

4.使用

  1. copy本项目的 ./src/components/imageCropper.vue文件 (imageCropper.vue需要引入exif-small.js)
  2. 在需要使用的页面直接引入imageCropper组件并绑定cropperConfig配置参数和裁剪之后的回调函数callback
<image-cropper ref="imageCropper" :cropperConfig="cropperConfig" :callback="loadImage"></image-cropper>
loadImage (data) {
  console.log(data)
  // data为base64字符串
}

5.git地址

6.参数说明

cropperConfig: {
  width: 1, // 裁剪宽度(比例)
  height: 1, // 裁剪高度(比例)
  quality: 0.7, // 图片质量(0~1之间)
  maxWidth: 750 // 导出的图片的最大宽度
}

目前这个组件已经在我们的多个项目上用到,暂未发现问题,欢迎提问题一起完善,如果帮您解决了问题,请给个star,谢谢啦0.0

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
4年前
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
前言图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。效果展示原图片大小:82KB压缩后的图片大小:17KB测试是不是特别good!!!看到上面的压缩后的图片,可能你还会质疑图片的清晰度,那么看下面(第一张图为压缩后的图片
Stella981 Stella981
4年前
Linux递归压缩图片脚本
1压缩图片使用ImageMagick的convert命令进行压缩图片,一般只需要一个指定压缩质量的参数,比如:convertquality751.jpg1_compress.jpg可以支持压缩jpg/png/jpeg。2递归压缩递归压缩使用find配合g
Stella981 Stella981
4年前
ImageMagick处理gif图片的奇怪问题
今天在裁剪gif图片的时候遇到问题了。gif图片裁剪后,图片大小仍然是原图大小,只保留了裁剪区域的图像,其余部分变成背景色透明了。查找后,发现时ImageMagick的问题,有解决办法,但是jmagick目前没有任何解决方案,大家有知道的吗?我在本地把这种gif用工具转成jpeg都再裁剪都不好用,真是神奇。别人的帖子如下:http://d
Stella981 Stella981
4年前
Android 图片压缩工具,仿微信朋友圈压缩策略。
项目描述目前做App开发总绕不开图片这个元素。但是随着手机拍照分辨率的提升,图片的压缩成为一个很重要的问题。单纯对图片进行裁切,压缩已经有很多文章介绍。但是裁切成多少,压缩成多少却很难控制好,裁切过头图片太小,质量压缩过头则显示效果太差。于是自然想到App巨头“微信”会是怎么处理,Luban(鲁班)就是通过在微信朋友圈发送近10
Wesley13 Wesley13
4年前
JS 图片压缩
👆  这是第 47 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~本文首发于政采云前端团队博客:JS图片压缩https://www.zoo.team/article/imagecompress!(https://oscimg.oschina.net/oscnet/4da76
Stella981 Stella981
4年前
Android 图片选择器,丰富的配置选项,极大程度的简化使用
最近也是刚好项目用到,于是就动手写了一个Android图片选择器的库。支持图库多选/单选/图片裁剪/拍照/自定义图片加载库,极大程度的简化使用。截图!输入图片说明(https://github.com/smuyyh/ImageSelector/blob/master/screenshot/screen.png?rawtrue"在这里输入
Wesley13 Wesley13
4年前
Thinkphp压缩图片
/\\\desription压缩图片\@paramsting$imgsrc图片路径\@paramstring$imgdst压缩后保存路径\/publicfunctioncompressedImage($imgsrc,$imgdst){list($width,$height,$ty
Wesley13 Wesley13
4年前
Java图片压缩
packagecom.test;importcom.sun.image.codec.jpeg.JPEGCodec;importcom.sun.image.codec.jpeg.JPEGImageEncoder;importorg.junit.Test;importjavax.imageio.
Stella981 Stella981
4年前
CGContextRef裁剪图片
/按照图片的层次顺序依次创建各个部分/CGContextRefctxUIGraphicsGetCurrentContext();//保存上下文CGContextSaveGState(ctx);
Stella981 Stella981
4年前
HTML5 file API加canvas实现图片前端JS压缩并上传
一、图片上传前端压缩的现实意义对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验。这种体验包括两方面:1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险。2.最最重要的体验改进点:省略了图片的再加工成本。很多网站的图片上传功能都会对图片的大小进
程序员小五 程序员小五
1年前
融云IM干货丨uni-app有哪些常用的插件?
uniapp拥有丰富的插件生态,以下是一些常用的插件推荐:1.图片编辑插件:BaImageEditor:功能强大的uniapp图片编辑插件,支持涂鸦、贴图、滤镜、裁剪、旋转、添加文字、美颜等。BaImagePaint:uniapp图片涂鸦、画笔插件,支持大