All Projects → Tianyazz → vue-pic-clip

Tianyazz / vue-pic-clip

Licence: other
一个简单的移动端裁剪图片上传插件

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to vue-pic-clip

natural-language-joint-query-search
Search photos on Unsplash based on OpenAI's CLIP model, support search with joint image+text queries and attention visualization.
Stars: ✭ 143 (+376.67%)
Mutual labels:  clip
fauxClip
Clipboard support for Vim without +clipboard
Stars: ✭ 32 (+6.67%)
Mutual labels:  clip
clip-container
A containerized REST API around OpenAI's CLIP model.
Stars: ✭ 46 (+53.33%)
Mutual labels:  clip
react-drop-n-crop
An opinionated implementation of react-dropzone and react-cropper
Stars: ✭ 17 (-43.33%)
Mutual labels:  cropper
Transformer-MM-Explainability
[ICCV 2021- Oral] Official PyTorch implementation for Generic Attention-model Explainability for Interpreting Bi-Modal and Encoder-Decoder Transformers, a novel method to visualize any Transformer-based network. Including examples for DETR, VQA.
Stars: ✭ 484 (+1513.33%)
Mutual labels:  clip
Paddle-CLIP
A PaddlePaddle version implementation of CLIP of OpenAI.
Stars: ✭ 51 (+70%)
Mutual labels:  clip
avatar
Simple online tool for cropping images from an URL, your clipboard, or your disk.
Stars: ✭ 63 (+110%)
Mutual labels:  cropper
chevereto-free
Self-hosted Image Hosting solution. Start your own Flickr/imgur alternative with your own rules.
Stars: ✭ 2,522 (+8306.67%)
Mutual labels:  upload-image
videoclip
Easily create videoclips with mpv.
Stars: ✭ 49 (+63.33%)
Mutual labels:  clip
photo-magician
🎨 provide some common image process apis with canvas
Stars: ✭ 12 (-60%)
Mutual labels:  clip
clip-italian
CLIP (Contrastive Language–Image Pre-training) for Italian
Stars: ✭ 113 (+276.67%)
Mutual labels:  clip
video features
Extract video features from raw videos using multiple GPUs. We support RAFT and PWC flow frames as well as S3D, I3D, R(2+1)D, VGGish, CLIP, ResNet features.
Stars: ✭ 225 (+650%)
Mutual labels:  clip
MoTIS
Mobile(iOS) Text-to-Image search powered by multimodal semantic representation models(e.g., OpenAI's CLIP). Accepted at NAACL 2022.
Stars: ✭ 60 (+100%)
Mutual labels:  clip
vqgan-clip-app
Local image generation using VQGAN-CLIP or CLIP guided diffusion
Stars: ✭ 94 (+213.33%)
Mutual labels:  clip
Cropper
Android Library for cropping an image at ease.
Stars: ✭ 21 (-30%)
Mutual labels:  cropper
avatarcropper
Simple quick avatar cropper!
Stars: ✭ 45 (+50%)
Mutual labels:  cropper
ngx-cropper
An Angular image plugin, includes upload, cropper, save to server.
Stars: ✭ 14 (-53.33%)
Mutual labels:  cropper
react-native-avatar-crop
Highly customisable <Crop /> component for React Native < 💅 >
Stars: ✭ 47 (+56.67%)
Mutual labels:  cropper
pushdeer
开放源码的无App推送服务,iOS14+扫码即用。亦支持快应用/iOS和Mac客户端、Android客户端、自制设备
Stars: ✭ 2,911 (+9603.33%)
Mutual labels:  clip
vcrop
A simple Vue image cropping component.
Stars: ✭ 14 (-53.33%)
Mutual labels:  cropper

vue-pic-clip

一个简单的移动端裁剪图片上传插件

预览demo.

### 安装 Install
npm install vue-pic-clip -D

// 组件内使用
import { VueClip }  from 'vue-pic-clip'
components: {
  VueClip,
},

// main.js里面使用
import VueClip from 'vue-pic-clip'

Vue.use(VueClip)
<vue-clip
  :img=""
  :autoClip="option.autoClip"
  :outputSize="option.outputSize"
  @finish="finish"
>上传头像</vue-clip>

配置参数

名称 功能 默认值 可选值
img 默认图片地址 url地址
accept 上传图片类型 'image/png, image/jpeg, image/jpg, image/gif' jpeg
autoClip 是否生成截图框 false ture
autoClipWidth 截图框的宽度 容器宽度80% 0~容器宽度
autoClipHeight 截图框的高度 与宽度相等 0~容器宽度
canMove 图片能否拖动 true true
canMoveBox 截图框能否拖动 ture ture
dataUrlType 输出图片数据类型 blob base64
fixed 截图框是否开启固定宽高比 false true
fixedNumber 截图框宽高比 [1,1] [宽度,高度]
fixedBox 固定截图框大小 false true
isOriginalImg 是否上传原图 false true
maxWidth 生成图片的最大宽度 600 0~max(启用裁剪或上传原图时最大宽度无效)
maxHeight 生成图片的最大高度 600 0~max(同上)
outputSize 输出图片压缩比 1 0.1-1
outputType 生成图片的格式 jpeg jpeg
theme 样式风格 rect rect
finish 完成操作事件 回调函数

主要研究vue-cropper的源码开发学习。一直使用这个插件做项目,最近比较闲,就撸了一个更简单的适合我自己用的插件。没有大量真机测试过,有什么问题,欢迎大家提Issues给我。

写个插件玩玩,给个star,多多支持,谢谢

Thanks to

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].