移动端上传头像并裁剪 - Clipic.js
00 min
2019-3-6
2024-7-18
type
status
date
slug
summary
tags
category
icon
password
📖
Clipic.js 插件可以为移动端提供头像上传并裁剪成指定尺寸,用原生 js 开发的,轻量级,包含 html 跟 css,不到 8kb。先上一张效果图,或者点此链接体验:https://teojs.github.io/clipic/
notion image
 

Github 地址

clipic
teojsUpdated Oct 25, 2023
 

预览

notion image
 

使用方法

支持 npm 方式

支持 cdn 引入

在 vue 项目中使用

普通项目的使用可以看作者的demo

参数说明

  • width:Number (默认:500) -- 裁剪宽度
  • height:Number (默认:500) -- 裁剪高度
  • ratio:Number (可选) -- 裁剪的比例,当传入ratiowidth/height将无效
  • src:String (必传) -- 需要裁剪的图片,可以是图片链接,或者 base64
  • type:String (默认:jpeg) -- 裁剪后图片的类型,仅支持 jpeg/png 两种
  • quality:Number (默认:0.9) -- 压缩质量
  • buttonText:Array (默认:['取消', '重置', '完成']) -- 底部三个按钮文本
上一篇
国际化各国语言缩写 - i18n
下一篇
CommonJS、AMD、ESM知识科普