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

<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>

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

const UA = navigator.userAgentconst isIpad = /(iPad).*OSs([d_]+)/.test(UA)
const isIpod = /(iPod)(.*OSs([d_]+))?/.test(UA)
const isIphone = !isIpad && /(iPhonesOS)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=""/>

<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设备}},

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

<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>