vue使用cropperjs实现移动端图片裁剪上传组件

本组件基于vuejs框架, 使用ES6基本语法, css预编译采用的scss, 图片裁剪模块基于cropperjs,拍照时的图片信息获取使用exif, 图片上传使用XMLHttpRequest

该组件已单独部署上线, 线上地址: upload-img.sufaith.com/, 图片最终是传至我个人的七牛云, 获取七牛云上传凭证token的接口是我单独做的一个nodejs服务, 可在PC或移动端打开测试下效果.

涉及到的知识点整理如下:

vuejs 介绍 — Vue.js

scss Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

cropperjs github.com/fengyuanche…

exif github.com/exif-js/exi…

XMLHttpRequest XMLHttpRequest()

整体项目分成3个文件:

1. uploadAvator.vue (父组件,用于选择图片,接收crop回调,执行上传)
2. crop.vue (裁剪组件, 用于裁剪,压缩,回调裁剪结果给uploadAvator.vue)
3. image.js (封装了基本的base64转换blob、获取图片url、xhr上传、图片压缩等方法)复制代码

整体流程如下:

input选择图片
调用cropperjs裁剪
修正方向, 压缩
上传

具体实现步骤:

一. 实现input选择文件

1. 定义一个隐形样式的输入框,用于选择图片文件 (imgUrl初始化为默认图片地址)

<template><div class="upload-wrapper" :style="{backgroundImage: 'url(' + imgUrl + ')'}"><input @change="onChange" class="input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""/></div>
</template>复制代码

<style lang="scss" scoped>
.upload-wrapper {position: relative;width: 77px;height: 77px;background-size: cover;border: 0;border-radius: 50%;margin: 20px auto;.input {position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;-webkit-tap-highlight-color: rgba(0,0,0,0);}
}
</style>复制代码

2. 对input选择图片做一些优化

(1) 每次点击input选择图片时, 弹出选择文件的弹窗很慢,有些延迟

解决方案: 明确定义input的accept属性对应的图片类型

<input type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""/>复制代码

(2) 在ios设备下input若含有capture属性, 则只能调起相册,而安卓设备下input若不含capture属性,则只能调起相册

解决方案: 判断是否为ios设备, 创建对应属性的input

const UA = navigator.userAgentconst isIpad = /(iPad).*OS\s([\d_]+)/.test(UA)
const isIpod = /(iPod)(.*OS\s([\d_]+))?/.test(UA)
const isIphone = !isIpad && /(iPhone\sOS)\s([\d_]+)/.test(UA)const isIos = isIpad || isIpod || isIphone
复制代码

<input v-if="isIos" @change="onChange" class="input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""/>
<!-- 安卓设备保留capture属性 -->
<input v-else @change="onChange" class="input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" capture="camera" multiple=""/>复制代码

(3) 再次点击input选择图片时, 若选择的图片和上一次选择的图片相同时,则不会触发onchange事件

解决方案: 在每次接收到onchange事件时先销毁当前input, 再重新创建一个input, 此时可利用vue的v-if指令,轻松销毁或重建

<input v-if="isIos && !destroyInput" @change="onChange" class="input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""/>
<!-- 安卓设备保留capture属性 -->
<input v-if="!isIos && !destroyInput" @change="onChange" class="input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" capture="camera" multiple=""/>复制代码

data() {return {destroyInput: false, // 是否销毁input元素, 解决在第二次和第一次选择的文件相同时不触发onchange事件的问题isIos: isIos // 是否为ios设备}},
复制代码

二. 调用cropperjs裁剪

1. 获取选择的图片的url (用于裁剪)

2. 获取拍照时的Orientation信息，解决拍出来的照片旋转问题

3.显示裁剪组件并初始化

4. 取消裁剪和开始裁剪

三. 修正方向, 压缩并将base64回调给父组件

const image = {}image.compress = function(img, Orientation) {// 图片压缩// alert('图片的朝向' + Orientation)let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')// 瓦片canvaslet tCanvas = document.createElement('canvas')let tctx = tCanvas.getContext('2d')let initSize = img.src.lengthlet width = img.widthlet height = img.height// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下let ratioif ((ratio = width * height / 4000000) > 1) {console.log('大于400万像素')ratio = Math.sqrt(ratio)width /= ratioheight /= ratio} else {ratio = 1}canvas.width = widthcanvas.height = height// 铺底色ctx.fillStyle = '#fff'ctx.fillRect(0, 0, canvas.width, canvas.height)// 如果图片像素大于100万则使用瓦片绘制let countif ((count = width * height / 1000000) > 1) {count = ~~(Math.sqrt(count) + 1) // 计算要分成多少块瓦片// 计算每块瓦片的宽和高let nw = ~~(width / count)let nh = ~~(height / count)tCanvas.width = nwtCanvas.height = nhfor (let i = 0; i < count; i++) {for (let j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)}}} else {ctx.drawImage(img, 0, 0, width, height)}// 修复ios上传图片的时候 被旋转的问题if (Orientation && Orientation !== '' && Orientation !== 1) {switch (Orientation) {case 6: // 需要顺时针（向左）90度旋转image.rotateImg(img, 'left', canvas)breakcase 8: // 需要逆时针（向右）90度旋转image.rotateImg(img, 'right', canvas)breakcase 3: // 需要180度旋转image.rotateImg(img, 'right', canvas) // 转两次image.rotateImg(img, 'right', canvas)break}}// 设置jpegs图片的质量let ndata = canvas.toDataURL('image/jpeg', 1)console.log(`压缩前：${initSize}`)console.log(`压缩后：${ndata.length}`)console.log(`压缩率：${~~(100 * (initSize - ndata.length) / initSize)}%`)tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0return ndata
}image.rotateImg = function(img, direction, canvas) {// 图片旋转// 最小与最大旋转方向，图片旋转4次后回到原方向const minStep = 0const maxStep = 3if (img == null) return// img的高度和宽度不能在img元素隐藏后获取，否则会出错let height = img.heightlet width = img.widthlet step = 2if (step == null) {step = minStep}if (direction === 'right') {step++// 旋转到原位置，即超过最大值step > maxStep && (step = minStep)} else {step--step < minStep && (step = maxStep)}// 旋转角度以弧度值为参数let degree = step * 90 * Math.PI / 180let ctx = canvas.getContext('2d')switch (step) {case 0:canvas.width = widthcanvas.height = heightctx.drawImage(img, 0, 0)breakcase 1:canvas.width = heightcanvas.height = widthctx.rotate(degree)ctx.drawImage(img, 0, -height)breakcase 2:canvas.width = widthcanvas.height = heightctx.rotate(degree)ctx.drawImage(img, -width, -height)breakcase 3:canvas.width = heightcanvas.height = widthctx.rotate(degree)ctx.drawImage(img, -width, 0)break}
}
export default image
复制代码

四. 上传图片

1. base64转换为文件

2. XMLHttpRequest上传

3. 定义上传状态的样式,包括上传进度和上传失败的标识

4.父组件接收到裁剪组件的回调的base64后,执行上传

<template>
<div><div class="upload-wrapper" :class="{'upload-status-bg': showStatusWrapper}" :style="{backgroundImage: 'url(' + imgUrl + ')'}"><input v-if="isIos && !destroyInput" @change="onChange" class="input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""/><!-- 安卓设备保留capture属性 --><input v-if="!isIos && !destroyInput" @change="onChange" class="input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" capture="camera" multiple=""/><!-- 上传状态 --><div v-if="showStatusWrapper" class="upload-status-wrapper"><i class="fail" v-if="showStatusFail">！</i><i v-else>{{procent}}%</i></div></div><crop ref="cropWrapper" v-show="showCrop" @hide="showCrop=false" @finish="setUpload"></crop>
</div>
</template>
复制代码

福利: 本文已同步到我的个人技术网站 IT干货-sufaith 该网站包括Python, Linux, Nodejs, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.

vue使用cropperjs实现移动端图片裁剪上传组件相关推荐

ipad html 自定义裁剪图片大小,移动端图片裁剪上传插件 Mavatar.js(原创)
插件描述:移动端头像上传,支撑头像预览和放大缩小平移,内置上传至后端请求方法. 注:请在移动端用手势查看缩放效果,PC端无法缩放 Mavatar 移动端头像上传,支撑头像预览和放大缩小平移,内置上传至 ...
基于vue + axios + lrz.js 微信端图片压缩上传
业务场景微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
vue移动端图片裁剪上传
1. 安装cropperjs依赖库 npm install cropperjs 2. 编写组件SimpleCropper.vue <template><div class=" ...
Element UI结合vue-cropper打造图片裁剪上传组件
效果显示引用vue-cropper npm install vue-cropperyarn add vue-cropper 创建组件文件夹上传按钮组件 index.vue <template ...
vue2 图片裁剪上传功能
是是是效果: 1. vue-cropper裁剪组件详细介绍可关注:vue裁剪组件vue-cropper_大大.的博客-CSDN博客_vue-cropper 2.代码 # npm 安装 npm ins ...
【VUE】Toast-UI/Editor工具实现图片自定义上传到服务器
Toast-UI/Editor工具实现图片自定义上传到服务器 author: jwensh date: 2021.06.17 文章目录 Toast-UI/Editor工具实现图片自定义上传到服务器所 ...
JAVA图片裁剪上传实例______软件开发-帮助类
实现思路使用jcrop插件手机要裁剪图片的坐标将收集到的参数传递到后台,在后台使用java图形对象绘制图像进行裁剪后台处理流程: 1.将上传的图片按按照比例进行压缩后上传到文件服务器,并且将 ...
Android 图片批量上传,移动端图片批量上传问题
一.操作系统 1.ios ios的操作系统: 实现图片批量上传,可以直接使用input type=file 加上multiple 就可以实现,至于有些图片显示有问题可以通过 new FileRead ...
vue 图片裁剪上传
最近写的一个项目用到头像上传,需要裁剪功能,缩放功能,能具备压缩上传功能,因为手机现在的像素太好了,随便一张图片的大小都上M了,而且要求手机端和pc端都可要可以使用.通过网上找到了一个合适的插件(vu ...

vue使用cropperjs实现移动端图片裁剪上传组件

vue使用cropperjs实现移动端图片裁剪上传组件相关推荐

最新文章

热门文章