/vue-clip

基于vue的移动端图片裁剪压缩处理

Primary LanguageJavaScript

vue-clip

vue图片裁减压缩

效果图

效果图

项目描述

基于vue的一款图片裁剪压缩工具,可以将用户上传的图片进行最小尺寸压缩,压缩完成后不大于100k,并转化成base64格式,可以直接放入img标签中,可以在控制台看出图片压缩信息 压缩信息

项目依赖

cropperjs 第三方的一个裁剪库 exif 获取图片资源的一个库,用于解决ios下图片翻转的问题

项目核心js

核心js放在 /src/static/ 下的 clipper.js 里面代码注释也挺详细,可以根据实际情况自己改造

项目demo

demo放在 hello.vue 下面 调用方法是直接给input[file]控件,添加change事件,并调用methods中的change方法,这里要传event对象 change方法接收两个参数,第一个是event对象,第二个参数是一个对象,resultObj表示要展示的结果img对象,aspectRatio表示宽高比,另外参数可以根据实际情况添加,主要参考cropper文档说明

项目运行

直接 npm install 安装依赖,然后 npm run dev

ps:可以结合我这篇文章一起看看 基于vue的移动端图片裁剪压缩

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.