本文已同步到专业技术网站 , 该网站专注于前后端开发技术与经验分享, 包含Web开发、Nodejs、Python、Linux、IT资讯等板块.
本组件基于vuejs框架, 使用ES6基本语法, css预编译采用的scss, 图片裁剪模块基于cropperjs,拍照时的图片信息获取使用exif, 图片上传使用XMLHttpRequest
该组件已单独部署上线, 线上地址: http://upload-/, 图片最终是传至我个人的七牛云, 获取七牛云上传凭证token的接口是我单独做的一个nodejs服务, 可在PC或移动端打开测试下效果.
涉及到的知识点整理如下:
vuejs介绍 — Vue.js
scssSass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网
cropperjs/fengyuanchen/cropperjs
exif/exif-js/exif-js
XMLHttpRequestXMLHttpRequest()
整体项目分成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).*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=""/>
(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 = {}press = 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>
★ 关于项目源码
知识无价!本项目涉及到的所有源代码我已整理完成,并已应用于商业项目。为防止无成本的快速抄袭, 实现流程我是拆分着写的, 涉及到的部分代码,我已替换成图片, 如果你不嫌麻烦的话,可照着逐个写一遍, 然后梳理下流程即可. 如果你想快速实现此功能, 又不想费功夫琢磨,想要一份现成代码的话, 请点击下方的打赏按钮, 打赏金额不少于10元哦, 收到打赏后,我会私信源码给你。对源码有任何不懂的地方,可以私信我协助你进行测试。
如果觉得《.net 移动端 web 上传图片_vue使用cropperjs实现移动端图片裁剪上传组件》对你有帮助，请点赞、收藏，并留下你的观点哦！
