自由截图组件 - 更新日志

1.3.0（2021-03-16）

更新了

今天有个朋友给我发了私信，让我新增一个等比例截图功能，说项目要的比较着急。正好趁着中午休息的功夫看了一下代码，感觉这个需求做起来也不是很费事，所有花了点功夫完善了固定宽高比截图的功能。由于时间比较仓促，功能实现了，但是代码写的比较随意，还是那句话，大家用的不舒服的可以自行改代码，源码里面对关键代码都添加了注释！

新特性

  • 新增固定宽高比截图。使用方法：设置cropperType="ratio"。同时通过:ratio="4 / 3" 属性指定宽高比（默认是1/1，也就是正方形截图），注意宽高比仅支持数值类型，直接设置分数的方式能更好理解。

缺陷修复

  • 修复了固定比例截图时，在特定条件下边界判断失效的问题。感谢道友951681334@qq.com提供的反馈和解决方案。
  • 更新了使用案例，原使用案例中组件名字写错了，晕！

马上又到搬砖时间了，就这样吧！

1.2.1（2021-02-25）

更新了。。。

  • 晕更新说明出不来。。。重新发布一下

    更新说明

  • [修复 bug] 修复上一版本选择长图时，底部菜单栏遮挡导致无法拖动的问题；
  • [更新 UI 和样式文件] 优化了预览图片的样式，图片预览不再只有裁剪区域大小，而是完全显示图片的最短边；
  • [更新 UI 和样式文件] 优化了裁剪区域的样式，更容易区分裁剪区域和图片；
  • [引入新功能] 新增等比例裁剪（正方形裁剪）功能；
  • [引入新功能] 支持调整输出的图片质量和图片类型，具体见使用文档；
  • [撰写文档] 完善了组件的使用文档，终于不用被大家骂没有文档了。。。；

ps : 调整图片输出质量好像没什么作用，比较有效的方法时改变输出图片的尺寸，不过本次没有开发该属性，有需要的看官可以自行改代码，本次更新添加了许多重要注释，大家可以自行改造。

  • 感谢大家的支持

1.2.0（2021-02-25）

更新了。。。

更新说明

1.0.0（2019-11-29）

gmy-img-cropper

NPM安装： npm i gmy-img-cropper

使用说明

页面引入：import gmyList from "../../components/gmy-img-cropper/gmy-img-cropper.vue"

页面使用：<gmy-img-cropper ref="gmyImgCropper" @getImg = "getImg">

参数说明

  • ref-->绑定组件
  • getImg-->获取组件截取的图片路径

    使用说明

  • 页面通过按钮等调用事件： chooseImg:function(){ //将chooseImg事件绑定到你的按钮或图标上 this.$refs.gmyImgCropper.getImage(); this.imgCropperShow = true; //该标志用于控制页面在组件显示时主页面隐藏 },
  • 备注： 该组件会占据整个屏幕，因此建议在调用截图组件时隐藏主页面内容，待截取成功后在getImg中再将主页面显示出来

使用案例

<style lang="scss"> body{ background-color: $bgc; } </style>