前段时间公司要弄一个uniapp的H5拍照上传的功能首先调用uni.chooseImage具体看官网因为手机拍照像素尺寸很大官方图片压缩不支持H5话不多说基本思路是1、先将图片的file文件转成baseURL2、创建一个image标签去接收文件获取图片的宽高和比例。3、创建canvas画布设置画布的大小。4、将图片绘制到canvas上面。5、对canvas进行压缩处理获得新的baseURL6、将图片的baseURL转化回file格式。最后我们调用这个方法可以拿到图片的file格式根据接口所需要的格式再继续转换我最后转换为blob我们在utils写一个方法 Compress.jsimport { Message } from element-ui class Compress { constructor(file,width -1,quality 0.92,targetSize 3){ this.file file//文件 this.width width//不传初始赋值-1等比缩放不用传高度 this.quality quality//不传初始赋值0.92。值范围0~1 this.targetSize targetSize//目标大小控制上传图片大小 传值方式targetSize:1 * 1024 * 1024的值默认3m } // 压缩 compressUpload(){ const rawImage this.file//获取文件 // console.log(111); if(!rawImage) return false // console.log(222); if(!this.isImage(rawImage)){ // console.log(333); Message.error(图片只支持.jpg, .png, .bmp, .jpeg, .webp格式!) return false } return new Promise(async (resolve,reject) { if(!this.isLimitSize(rawImage)){ // 需压缩 let imageFile await this.readImage(rawImage) console.log(imageFile,imageFile) resolve({ file:imageFile.file }) console.log(压缩后上传) }else{ // 无需压缩 resolve({ file:rawImage }) console.log(原图上传) } }) } /** * desc 图片压缩 * param image 被压缩的img对象 * param type 压缩后转换的文件类型 **/ // 对图片进行处理 readImage(file){ return new Promise((resolve,reject) { let data //保存地址 const reader new FileReader() // 读取文件并将文件以URL的形式保存在resulr属性中 base64格式 reader.readAsDataURL(file) // 文件读取完成时触发 reader.onload async e { const image new Image() if(typeof e.target.result object){ // 把Array Buffer转化为blob 如果是base64不需要 data window.URL.createObjectURL(new Blob([e.target.result])) }else{ data e.target.result//base64格式图片地址 } image.src data image.onload async e { const canvas document.createElement(canvas) const context canvas.getContext(2d) const { width: originWidth, height: originHeight } image // 目标尺寸 let targetWidth originWidth let targetHeight originHeight // 获得长宽比例 const scale targetWidth / targetHeight; //获取压缩后的图片宽度,如果width为-1默认原图宽度 targetWidth this.width -1 ? targetWidth : this.width; //获取压缩后的图片高度,如果width为-1默认原图高度 targetHeight this.width -1 ? targetHeight : parseInt(this.width / scale); canvas.width targetWidth canvas.height targetHeight context.clearRect(0, 0, targetWidth, targetHeight) context.fillStyle #fff // 图片绘制 context.drawImage(image, 0, 0, targetWidth, targetHeight) let dataUrl canvas.toDataURL(file.type, this.quality || 0.92)//0.92为压缩比可根据需要设置设置过小会影响图片质量 let fileObj await this.dataURItoBlob(dataUrl,file.type,file) resolve(fileObj) } } reader.onerror e { Message.error(图片读取出错!) } }) } // base64转为Blob async dataURItoBlob(dataurl,type image/png,file){ return new Promise((resolve,reject) { const filename file let arr dataurl.split(,) let mime arr[0].match(/:(.*?);/)[1] let suffix mime.split(/)[1] let bstr atob(arr[1]) let n bstr.length let u8arr new Uint8Array(n) while (n--) { u8arr[n] bstr.charCodeAt(n) } const miniFile new File([u8arr], ${filename}.${suffix}, {type: mime}) console.log({ file:miniFile, origin:file, beforeKB:Number((file.size / 1024).toFixed(2)), afterKB:Number((miniFile.size / 1024).toFixed(2)), }) resolve({ file:miniFile, origin:file, beforeKB:Number((file.size / 1024).toFixed(2)), afterKB:Number((miniFile.size / 1024).toFixed(2)) }) }) } // 判断上传的图片格式是否符合要求 isImage(image){ return /\.(jpg|png|bmp|jpeg|webp|gif)$/.test(image.name) } // 判断图片是否过大 isLimitSize(image){ const isLimitSize this.targetSize (image.size / 1024 / 1024) // console.log(size,image.size) // console.log(isLimitSize,isLimitSize) // console.log(targetSize,this.targetSize) // console.log(image) if(!isLimitSize){ return true }else{ return false } } } export default Compress在所需要的页面调用import Compress from ../../common/utils/Compress;通过调用方法得到图片的file格式// 文件res.tempFiles[0]是uniapp中chooseImage方法得到的 宽度 质量 图片尺寸1是1024 * 1024 let imgfile new Compress(res.tempFiles[0], 600, 0.8, 1); let res2 await imgfile.compressUpload(); // 记得配合 async 使用 console.log(res2, res2.file); // 得到图片的file格式根据接口的需要我将file转换为blob格式如下// res2.file就是上面我们得到的file图片 res.tempFiles[0].type是uniapp中chooseImage方法的图片类型 let blob new Blob([res2.file], {type: res.tempFiles[0].type}) let reader new FileReader() reader.readAsDataURL(blob) reader.onload (e) { // console.log(e, e); // 其中e.currentTarget.result就是我们需要的图片格式blob // 调用uniapp中的图片文件上传方法 uni.uploadFile({ url: , // 接口地址 fileType: image, // 图片类型 filePath: e.currentTarget.result, // blob图片格式 name: file, formData: { TOKEN: , }, success(res1) { }, }); } }希望能帮到你们求个点赞完整代码如下// 调用手机相机(使用了uniapp) pictureClick() { let that this; uni.chooseImage({ count: 1, sourceType: [camera], // camera拍照album相册 success: async res { this.tempFilePaths res.tempFilePaths; this.Imgs res.tempFilePaths[0]; let imgfile new Compress(res.tempFiles[0], 600, 0.8, 1); let res2 await imgfile.compressUpload(); let blob new Blob([res2.file], {type: res.tempFiles[0].type}) let reader new FileReader() reader.readAsDataURL(blob) reader.onload (e) { uni.uploadFile({ url: , // 接口地址 fileType: image, filePath: e.currentTarget.result, name: file, formData: { type: 10, TOKEN: , }, success(res1) { // 后端人脸识别接口 } else if (res.status 1) { uni.showToast({ title: res.msg, icon: none, duration: 2000, }); } else { alert(res.msg); } }); }, }); } }, }); }, uniapp h5拍照上传照片
前段时间公司要弄一个uniapp的H5拍照上传的功能首先调用uni.chooseImage具体看官网因为手机拍照像素尺寸很大官方图片压缩不支持H5话不多说基本思路是1、先将图片的file文件转成baseURL2、创建一个image标签去接收文件获取图片的宽高和比例。3、创建canvas画布设置画布的大小。4、将图片绘制到canvas上面。5、对canvas进行压缩处理获得新的baseURL6、将图片的baseURL转化回file格式。最后我们调用这个方法可以拿到图片的file格式根据接口所需要的格式再继续转换我最后转换为blob我们在utils写一个方法 Compress.jsimport { Message } from element-ui class Compress { constructor(file,width -1,quality 0.92,targetSize 3){ this.file file//文件 this.width width//不传初始赋值-1等比缩放不用传高度 this.quality quality//不传初始赋值0.92。值范围0~1 this.targetSize targetSize//目标大小控制上传图片大小 传值方式targetSize:1 * 1024 * 1024的值默认3m } // 压缩 compressUpload(){ const rawImage this.file//获取文件 // console.log(111); if(!rawImage) return false // console.log(222); if(!this.isImage(rawImage)){ // console.log(333); Message.error(图片只支持.jpg, .png, .bmp, .jpeg, .webp格式!) return false } return new Promise(async (resolve,reject) { if(!this.isLimitSize(rawImage)){ // 需压缩 let imageFile await this.readImage(rawImage) console.log(imageFile,imageFile) resolve({ file:imageFile.file }) console.log(压缩后上传) }else{ // 无需压缩 resolve({ file:rawImage }) console.log(原图上传) } }) } /** * desc 图片压缩 * param image 被压缩的img对象 * param type 压缩后转换的文件类型 **/ // 对图片进行处理 readImage(file){ return new Promise((resolve,reject) { let data //保存地址 const reader new FileReader() // 读取文件并将文件以URL的形式保存在resulr属性中 base64格式 reader.readAsDataURL(file) // 文件读取完成时触发 reader.onload async e { const image new Image() if(typeof e.target.result object){ // 把Array Buffer转化为blob 如果是base64不需要 data window.URL.createObjectURL(new Blob([e.target.result])) }else{ data e.target.result//base64格式图片地址 } image.src data image.onload async e { const canvas document.createElement(canvas) const context canvas.getContext(2d) const { width: originWidth, height: originHeight } image // 目标尺寸 let targetWidth originWidth let targetHeight originHeight // 获得长宽比例 const scale targetWidth / targetHeight; //获取压缩后的图片宽度,如果width为-1默认原图宽度 targetWidth this.width -1 ? targetWidth : this.width; //获取压缩后的图片高度,如果width为-1默认原图高度 targetHeight this.width -1 ? targetHeight : parseInt(this.width / scale); canvas.width targetWidth canvas.height targetHeight context.clearRect(0, 0, targetWidth, targetHeight) context.fillStyle #fff // 图片绘制 context.drawImage(image, 0, 0, targetWidth, targetHeight) let dataUrl canvas.toDataURL(file.type, this.quality || 0.92)//0.92为压缩比可根据需要设置设置过小会影响图片质量 let fileObj await this.dataURItoBlob(dataUrl,file.type,file) resolve(fileObj) } } reader.onerror e { Message.error(图片读取出错!) } }) } // base64转为Blob async dataURItoBlob(dataurl,type image/png,file){ return new Promise((resolve,reject) { const filename file let arr dataurl.split(,) let mime arr[0].match(/:(.*?);/)[1] let suffix mime.split(/)[1] let bstr atob(arr[1]) let n bstr.length let u8arr new Uint8Array(n) while (n--) { u8arr[n] bstr.charCodeAt(n) } const miniFile new File([u8arr], ${filename}.${suffix}, {type: mime}) console.log({ file:miniFile, origin:file, beforeKB:Number((file.size / 1024).toFixed(2)), afterKB:Number((miniFile.size / 1024).toFixed(2)), }) resolve({ file:miniFile, origin:file, beforeKB:Number((file.size / 1024).toFixed(2)), afterKB:Number((miniFile.size / 1024).toFixed(2)) }) }) } // 判断上传的图片格式是否符合要求 isImage(image){ return /\.(jpg|png|bmp|jpeg|webp|gif)$/.test(image.name) } // 判断图片是否过大 isLimitSize(image){ const isLimitSize this.targetSize (image.size / 1024 / 1024) // console.log(size,image.size) // console.log(isLimitSize,isLimitSize) // console.log(targetSize,this.targetSize) // console.log(image) if(!isLimitSize){ return true }else{ return false } } } export default Compress在所需要的页面调用import Compress from ../../common/utils/Compress;通过调用方法得到图片的file格式// 文件res.tempFiles[0]是uniapp中chooseImage方法得到的 宽度 质量 图片尺寸1是1024 * 1024 let imgfile new Compress(res.tempFiles[0], 600, 0.8, 1); let res2 await imgfile.compressUpload(); // 记得配合 async 使用 console.log(res2, res2.file); // 得到图片的file格式根据接口的需要我将file转换为blob格式如下// res2.file就是上面我们得到的file图片 res.tempFiles[0].type是uniapp中chooseImage方法的图片类型 let blob new Blob([res2.file], {type: res.tempFiles[0].type}) let reader new FileReader() reader.readAsDataURL(blob) reader.onload (e) { // console.log(e, e); // 其中e.currentTarget.result就是我们需要的图片格式blob // 调用uniapp中的图片文件上传方法 uni.uploadFile({ url: , // 接口地址 fileType: image, // 图片类型 filePath: e.currentTarget.result, // blob图片格式 name: file, formData: { TOKEN: , }, success(res1) { }, }); } }希望能帮到你们求个点赞完整代码如下// 调用手机相机(使用了uniapp) pictureClick() { let that this; uni.chooseImage({ count: 1, sourceType: [camera], // camera拍照album相册 success: async res { this.tempFilePaths res.tempFilePaths; this.Imgs res.tempFilePaths[0]; let imgfile new Compress(res.tempFiles[0], 600, 0.8, 1); let res2 await imgfile.compressUpload(); let blob new Blob([res2.file], {type: res.tempFiles[0].type}) let reader new FileReader() reader.readAsDataURL(blob) reader.onload (e) { uni.uploadFile({ url: , // 接口地址 fileType: image, filePath: e.currentTarget.result, name: file, formData: { type: 10, TOKEN: , }, success(res1) { // 后端人脸识别接口 } else if (res.status 1) { uni.showToast({ title: res.msg, icon: none, duration: 2000, }); } else { alert(res.msg); } }); }, }); } }, }); },