资讯专栏INFORMATION COLUMN

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

android_c / 2542人阅读

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

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.使用

copy本项目的 ./src/components/imageCropper.vue文件 (imageCropper.vue需要引入exif-small.js)

在需要使用的页面直接引入imageCropper组件并绑定cropperConfig配置参数和裁剪之后的回调函数callback

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://www.ucloud.cn/yun/83756.html

相关文章

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

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

    boredream 评论0 收藏0
  • 【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件

    摘要:在裁剪框外拖动鼠标会生成一个新的裁剪框。这个是裁剪框的纵横比,默认是不限制的。初始化完成后是否自动显示裁剪框自动显示的裁剪框的大小。方法的使用格式为手动显示裁剪框。 插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪、旋转,花了不少时间才看到了这个插件,感觉功能挺全面,代码实现起...

    阿罗 评论0 收藏0
  • HTML 简单拼图游戏

    摘要:基本需求有一个固定区域,被拆分成个同等大小的碎片,拿走其中一块,靠近缺口的块可以向缺口方向移动当拼出原来的图样视为完成。左右移动很简单,序号大的序号小的即可。 先不废话,请看演示。 showImg(https://segmentfault.com/img/bVyoj2);showImg(https://segmentfault.com/img/bVyoj5); 公司要搞这么个微信活动...

    vslam 评论0 收藏0
  • HTML 简单拼图游戏

    摘要:基本需求有一个固定区域,被拆分成个同等大小的碎片,拿走其中一块,靠近缺口的块可以向缺口方向移动当拼出原来的图样视为完成。左右移动很简单,序号大的序号小的即可。 先不废话,请看演示。 showImg(https://segmentfault.com/img/bVyoj2);showImg(https://segmentfault.com/img/bVyoj5); 公司要搞这么个微信活动...

    Pines_Cheng 评论0 收藏0
  • HTML 简单拼图游戏

    摘要:基本需求有一个固定区域,被拆分成个同等大小的碎片,拿走其中一块,靠近缺口的块可以向缺口方向移动当拼出原来的图样视为完成。左右移动很简单,序号大的序号小的即可。 先不废话,请看演示。 showImg(https://segmentfault.com/img/bVyoj2);showImg(https://segmentfault.com/img/bVyoj5); 公司要搞这么个微信活动...

    eechen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<