一个基于vue的图片裁剪和去底色插件
vue-image-handler
一个支持图片自定义裁剪和去底色的插件
【一个基于vue的图片裁剪和去底色插件】github地址（感谢star）
预览效果
安装
npm install vue-image-handler
# 或者
yarn add vue-image-handler
vue项目中使用
// main.js
// 全局安装使用
import VueImageHandler from 'vue-image-handler'
Vue.use(VueImageHandler)// 页面单独引入使用
import VueImageHandler from 'vue-image-handler'
// ...省略其他代码
components: { VueImageHandler }
Attributes
| 名称 | 功能 | 默认值 | 类型 | 可选值 |
|---|---|---|---|---|
| canvas-width | 画布的宽度 | 380px | String | |
| canvas-height | 画布的高度 | 252px | String | |
| img-file | 图片资源 | Blob/File/String | ||
| wipe-color | 要去除的底色 | String | white/black | |
| color-diff | 去底色的容差值 | 20 | Number | 1-100 |
| option | 其他配置(具体配置参数见下表) | Object |
| 名称 | 功能 | 默认值 | 类型 | 可选值 |
|---|---|---|---|---|
| outputQuality | 处理后的图片质量 | 1 | Number | 0.1-1 |
| outputType | 处理后的图片格式 | png | String | jpeg/png/webp |
| canMove | 图片是否可以移动 | true | Boolean | true/false |
| fixedBox | 固定截图框大小 | false | Boolean | true/false |
| cropWidth | 截图框宽 | 380 | Number/String | 380 |
| cropHeight | 截图框高 | 252 | Number/String | 252 |
this.$refs[your ref name].[method]调用）| 方法名 | 说明 | 参数 |
|---|---|---|
| rotate | 旋转90° | |
| download | 下载处理后的图片 | |
| getImageUrl | 获取处理后的图片Base64 | |
| clear | 清空画布和预览图 | |
| refresh | 刷新画布 |
更新日志 1.2.8
支持页面内单独引用：`import VueImageHandler from 'vue-image-handler'`即将更新 1. download和getImageUrl支持自定义图片格式输出
推荐阅读
- 一个人的旅行，三亚
- 一个小故事，我的思考。
- 一个人的碎碎念
- 七年之痒之后
- 我从来不做坏事
- 异地恋中，逐渐适应一个人到底意味着什么（）
- vue-cli|vue-cli 3.x vue.config.js 配置
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 迷失的世界（二十七）
- live|live to inspire 一个普通上班族的流水账0723