发愤做一个最好用的挪动端图片裁剪插件

2024年1月9日 143次阅读 来源: 独木桥先生

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

    原文作者：独木桥先生
    原文地址: https://segmentfault.com/a/1190000009997448
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞