图片压缩

components/w-compress/compress.js

@@ -0,0 +1,159 @@
+/**
+ * 图片压缩
+ * @param {String} imgUrl  需要压缩的图片路径
+ * @param {Object} self	必传，当前组件对象
+ * @param {Object} options 压缩参数
+ * 		width: 压缩到多宽，默认图片宽度(待优化，传入宽度，应计算高度)
+ * 		height: 压缩到多高，默认图片高度
+ * 		pixels: 压缩图片的最大分辨率，默认二百万
+ * 		quality: 压缩质量，默认0.8
+ * 		type: 获取的base64类型，默认jpg
+ * 		base64: 是否返回base64，默认true(非H5有效)
+ * @return {Promise}
+ * 		reject
+ * 			code
+ * 				-1: 获取图片信息错误
+ * 				-2: 极大可能创建图片对象出错(h5会出现，出现概率无限接近0)
+ * 				-3: canvas转图片错误(小程序会出现)
+ * 				-4: 图片转base64错误(小程序会出现)
+ */
+
+// 图片分辨率压缩
+const calcImageSize = (res, pixels) => {
+	let imgW, imgH
+	imgW = res.width
+	imgH = res.height
+	
+	let ratio
+	if((ratio = imgW * imgH / pixels) > 1) {
+		ratio = Math.sqrt(ratio)
+		imgW = parseInt(imgW / ratio)
+		imgH = parseInt(imgH / ratio)
+	} else {
+		ratio = 1
+	}
+	
+	return { imgW, imgH }
+}
+
+const urlTobase64 = (url, type) => {
+	return new Promise((resolve, reject) => {
+		uni.getFileSystemManager().readFile({
+			filePath: url,
+			encoding: 'base64',
+			success: res => {
+				let base64 = res.data
+				base64 = `data:image/${type};base64,${base64}`
+				resolve(base64)
+			}
+		})
+	})
+}
+
+const compress = (imgUrl, slef, options={}) => {
+	/*************** 参数默认值 ***************/
+	const MAX_PIXELS = 2000000	// 最大分辨率，宽 * 高 的值
+	const MAX_QUALITY = 0.8	// 压缩质量
+	const IMG_TYPE = 'jpg'
+	const CANVAS_ID = 'compress_canvas'
+	const BASE_64 = false
+	
+	return new Promise((resolve, reject) => {
+		uni.getImageInfo({
+			src: imgUrl,
+			success: res => {
+				let pixels = options.pixels || MAX_PIXELS
+				let quality = options.quality || MAX_QUALITY
+				let type = options.type || IMG_TYPE
+				let canvasId = options.canvasId || CANVAS_ID
+				let isBase64 = options.base64 || BASE_64
+				
+				let { imgW, imgH } = calcImageSize(res, pixels)
+				let w = options.width || imgW
+				let h = options.height || imgH
+				// #ifdef H5
+				type = type == 'jpg' ? 'jpeg' : type,
+				// #endif
+				
+				// #ifndef H5
+				type = type == 'png' ? 'png' : 'jpg',
+				// #endif
+				console.log(`%c 宽: ${w} %c 高: ${h} %c 分辨率: ${w * h} %c 质量: ${quality} %c 类型: ${type}`, 'color:#f00', 'background-color:#f60;color:#fff', 'color:#F00', 'background-color:#f60;color:#fff', 'color:#F00')
+				
+				// #ifdef H5
+				let img = new Image()
+				img.src = res.path
+				img.onload = () => {
+					const canvas = document.createElement('canvas')
+					const ctx = canvas.getContext('2d')
+					canvas.width = w
+					canvas.height = h
+					let drawW = w, drawH = h
+					
+					ctx.drawImage(img, 0, 0, drawW, drawH)
+					
+					let base64 = canvas.toDataURL(`image/${type}`, quality)
+					
+					resolve(base64)
+				}
+				// #endif
+				
+				
+				// 非h5
+				// #ifndef H5
+				slef.height = h
+				slef.width = w
+				
+				slef.$nextTick(function() {
+					let canvas = null
+					if(!canvas) {
+						canvas = uni.createCanvasContext(canvasId, slef)
+					}
+					canvas.drawImage(res.path, 0, 0, w, h)
+					canvas.draw()
+					setTimeout(() => {
+						uni.canvasToTempFilePath({
+							canvasId: canvasId,
+							x: 0,
+							y: 0,
+							width: w,
+							height: h,
+							destWidth: w,
+							destHeight: h,
+							fileType: type,
+							quality: quality,
+							success: file => {
+								if(isBase64) {
+									urlTobase64(file.tempFilePath, type)
+										.then(res => {
+											canvas = null
+											resolve(res)
+										})
+										.catch(e => {
+											reject({
+												code: -4,
+												msg: '图片转base64错误',
+												data: e
+											})
+										})
+								} else {
+									resolve(file.tempFilePath)
+								}
+							},
+							fail: e => {
+								reject({
+									code: -3,
+									msg: 'canvas转图片错误',
+									data: e
+								})
+							}
+						}, slef)
+					}, 500)
+				})
+				// #endif
+			}
+		})
+	})
+}
+
+export default compress

components/w-compress/w-compress.vue

@@ -0,0 +1,75 @@
+<template>
+	<view class="compress__canvas">
+		<!-- #ifndef H5 -->
+		<canvas canvas-id="compress_canvas" :style="{width: width + 'px', height: height + 'px'}"></canvas>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+/**
+ * 使用方法
+ * import WCompress from '@/components/w-compress/compress.js'
+ * components: { WCompress }
+ * <w-compress ref='wCompress' />
+ * this.$refs.wCompress.start(res.tempFilePaths[0]).then().catch()
+ * this.$refs.wCompress.start(res.tempFilePaths).then().catch()
+ */
+import compress from './compress.js'
+export default {
+	name: 'wCompress',
+	data() {
+		return {
+			width: 0,
+			height: 0
+		}
+	},
+	methods: {
+		start(imgUrl, options={}) {
+			return new Promise(async (resolve, reject) => {
+				if(imgUrl instanceof Array) {
+					try{
+						let arr = []
+						for(let i=0; i<imgUrl.length; i++) {
+							let url = await compress(imgUrl[i], this, options)
+							arr.push(url)
+						}
+						
+						resolve(arr)
+					}catch(e){
+						reject(e)
+					}
+					
+					/* let arr = []
+					arr = imgUrl.map(async c => {
+						return await compress(c, this, options)
+					})
+					resolve(arr) */
+					
+					/* let arr = imgUrl.map(c => {
+						return compress(c, this, options)
+					})
+					
+					Promise.all(arr)
+						.then(resolve)
+						.catch(reject) */
+				} else {
+					compress(imgUrl, this, options)
+						.then(resolve)
+						.catch(reject)
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style>
+.compress__canvas {
+	position: absolute;
+	left: 10000px;
+	visibility: hidden;
+	height: 0;
+	overflow: hidden;
+}
+</style>

pages/addjk/choice.vue

@@ -33,12 +33,16 @@
 				</scroll-view>
 			</view>
 		</view>
-		
+		<w-compress ref='wCompress' />
 	</view>
 </template>
 
 <script>
+	import WCompress from '@/components/w-compress/w-compress.vue'
 	export default {
+		 components: {
+		        WCompress
+		},
 		data() {
 			return {
 				list:'',
@@ -102,14 +106,41 @@
 		   },
 		   upimg(){
 			   var that = this;
-			   uni.chooseImage({
-			   	sourceType: ['album','camera'],
-			   	count:1, 
-				sizeType:['compressed'],
+			    uni.chooseImage({
+			    	sourceType: ['album','camera'],
+			    	count:1, 
+				 sizeType:['compressed'],
 			   	success: (chooseImageRes) => {
 			   		const tempFilePaths = chooseImageRes.tempFilePaths;
-			   		that.file=tempFilePaths[0]
-			   		 uni.uploadFile({
+					console.log(tempFilePaths[0])
+					//that.getImageInfo(tempFilePaths[0])
+			   		 that.file=tempFilePaths[0];
+					 that.$refs.wCompress.start(that.file, {
+					             pixels: 400000,  // 最大分辨率，默认二百万
+					             quality: 0.9,     // 压缩质量，默认0.8
+					             type: 'png',      // 图片类型，默认jpg
+					             base64: true,     // 是否返回base64，默认false，非H5有效
+					           }).then(resxx => {
+					                 uni.uploadFile({
+					                        url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
+					                        filePath: resxx,
+					                        name: 'file',
+					                        formData: {
+					                            'user': 'test'
+					                        },
+					                        success: (uploadFileRes) => {
+					                            console.log(JSON.parse(uploadFileRes.data).data );
+													//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
+													that.imgurl=JSON.parse(uploadFileRes.data).data[0];
+													that.goAddzdy(that.imgurl)
+					                        }
+					                    });           
+					                           
+					            }).catch(e => {
+					                           
+					            })
+					      //  }
+			   		 /* uni.uploadFile({
 			   	            url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
 			   	            filePath: tempFilePaths[0],
 			   	            name: 'file',
@@ -122,12 +153,80 @@
 			   					that.imgurl=JSON.parse(uploadFileRes.data).data[0];
 								that.goAddzdy(that.imgurl)
 			   	            }
-			   	        });
-			   
+			   	        }); 
+			   */
 			   		
 			   	}
 			   });
-		   }
+			 
+		   },
+		   getImageInfo(src){
+			    let _this = this
+			                   uni.getImageInfo({
+			                       src,
+			                       success(res) {
+			                           let canvasWidth = res.width //图片原始长宽
+			                           let canvasHeight = res.height
+			                           let ratio = canvasWidth / canvasHeight;
+			                           if (canvasWidth > 500) {
+			                               canvasWidth = 500;
+			                               canvasHeight = Math.floor(canvasWidth / ratio);
+			                           }
+			               
+			                           let img = new Image()
+			                           img.src = res.path
+									 
+			                           let canvas = document.createElement('canvas');
+			                           let ctx = canvas.getContext('2d')
+			                           canvas.width = canvasWidth
+			                           canvas.height = canvasHeight
+			                           ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight)
+			                           canvas.toBlob(function(fileSrc) {
+										   
+			                               let imgSrc = window.URL.createObjectURL(fileSrc)
+			                               _this.upimgfwq(imgSrc)
+			                           })
+			                       }
+			                   })
+		   },
+		   upimgfwq(imgSrc){
+			   console.log(imgSrc)
+			   //let file = new File([imgSrc], '122.png')
+			  //  var renameFile =new File([imgSrc], this.time(new Date()) + '.png' );
+			   
+			  //   var formdata = new FormData();
+			  //   formdata.append('file', renameFile);
+			  // console.log(formdata)
+			   var that=this;
+			   uni.uploadFile({
+			          url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
+			          filePath:  imgSrc,
+			          name: 'file',
+			          formData: {
+			              'user': 'test'
+			          },
+			          success: (uploadFileRes) => {
+			              console.log(JSON.parse(uploadFileRes.data).data );
+							//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
+							that.imgurl=JSON.parse(uploadFileRes.data).data[0];
+							that.goAddzdy(that.imgurl)
+			          }
+			      });
+		   },
+		   time(time) {
+		             let month = time.getMonth() + 1;  // 月
+		             let date = time.getDate();  // 日
+		             let hh = time.getHours();  // 时
+		             let mm = time.getMinutes();  // 分
+		             let ss = time.getSeconds();  // 秒
+		             if (hh >=0 && hh<10){hh= '0' + hh;}
+		             if (mm >=0 && mm<10){mm= '0' + mm;}
+		             if (ss >=0 && ss<10){ss= '0' + ss;}
+		             if (month < 10){month= '0' + month;}
+		             if (date < 10){date= '0' + date;}
+		             return time.getFullYear().toString() + month.toString() + date.toString() + hh.toString() + mm.toString() + ss.toString();
+	       },
+		  
 		}
 	}
 </script>

pages/addjk/eadit.vue

@@ -147,11 +147,16 @@
 	  </view>
 	  <view style="height: 120rpx;"></view>
 	  <view class="preview" @click="preview">预览</view>
+	  <w-compress ref='wCompress' />
 	</view>
 </template>
 
 <script>
+	import WCompress from '@/components/w-compress/w-compress.vue'
 	export default {
+		components: {
+		        WCompress
+		},
 		data() {
 			return {
 				id:'',                //类型：String  可有字段  备注：新增无编辑有
@@ -292,22 +297,41 @@
 				sizeType:['compressed'],
 				success: (chooseImageRes) => {
 					const tempFilePaths = chooseImageRes.tempFilePaths;
-					that.file=tempFilePaths[0]
-					 uni.uploadFile({
-							url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
-							filePath: tempFilePaths[0],
-							name: 'file',
-							formData: {
-								'user': 'test'
-							},
-							success: (uploadFileRes) => {
-								console.log(JSON.parse(uploadFileRes.data).data );
-								that.img=JSON.parse(uploadFileRes.data).data[0]
-								//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
-								//that.imgurl=JSON.parse(uploadFileRes.data).data[0];
-								//that.goAddzdy(that.imgurl)
-							}
-						});
+					that.file=tempFilePaths[0];
+					that.$refs.wCompress.start(that.file, {
+					            pixels: 400000,  // 最大分辨率，默认二百万
+					            quality: 0.9,     // 压缩质量，默认0.8
+					            type: 'png',      // 图片类型，默认jpg
+					            base64: true,     // 是否返回base64，默认false，非H5有效
+					          }).then(resxx => {
+					                uni.uploadFile({
+					                       url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
+					                       filePath: resxx,
+					                       name: 'file',
+					                       formData: {
+					                           'user': 'test'
+					                       },
+					                       success: (uploadFileRes) => {
+					                         that.img=JSON.parse(uploadFileRes.data).data[0]
+					                       }
+					                   });           
+					                          
+					           }).catch(e => {
+					                          
+					           })
+					 // uni.uploadFile({
+						// 	url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
+						// 	filePath: tempFilePaths[0],
+						// 	name: 'file',
+						// 	formData: {
+						// 		'user': 'test'
+						// 	},
+						// 	success: (uploadFileRes) => {
+						// 		console.log(JSON.parse(uploadFileRes.data).data );
+						// 		that.img=JSON.parse(uploadFileRes.data).data[0]
+								
+						// 	}
+						// });
 
 					
 				}
@@ -442,21 +466,42 @@
 				success: (chooseImageRes) => {
 					const tempFilePaths = chooseImageRes.tempFilePaths;
 					that.file=tempFilePaths[0]
-					 uni.uploadFile({
-							url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
-							filePath: tempFilePaths[0],
-							name: 'file',
-							formData: {
-								'user': 'test'
-							},
-							success: (uploadFileRes) => {
-								console.log(JSON.parse(uploadFileRes.data).data );
-								that.imgListArr=that.imgListArr.concat(JSON.parse(uploadFileRes.data).data)
-								//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
-								//that.imgurl=JSON.parse(uploadFileRes.data).data[0];
-								//that.goAddzdy(that.imgurl)
-							}
-						});
+					that.$refs.wCompress.start(that.file, {
+					            pixels: 400000,  // 最大分辨率，默认二百万
+					            quality: 0.9,     // 压缩质量，默认0.8
+					            type: 'png',      // 图片类型，默认jpg
+					            base64: true,     // 是否返回base64，默认false，非H5有效
+					          }).then(resxx => {
+					                uni.uploadFile({
+					                       url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
+					                       filePath: resxx,
+					                       name: 'file',
+					                       formData: {
+					                           'user': 'test'
+					                       },
+					                       success: (uploadFileRes) => {
+					                         that.imgListArr=that.imgListArr.concat(JSON.parse(uploadFileRes.data).data)
+					                       }
+					                   });           
+					                          
+					           }).catch(e => {
+					                          
+					           })
+					 // uni.uploadFile({
+						// 	url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
+						// 	filePath: tempFilePaths[0],
+						// 	name: 'file',
+						// 	formData: {
+						// 		'user': 'test'
+						// 	},
+						// 	success: (uploadFileRes) => {
+						// 		console.log(JSON.parse(uploadFileRes.data).data );
+						// 		that.imgListArr=that.imgListArr.concat(JSON.parse(uploadFileRes.data).data)
+						// 		//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
+						// 		//that.imgurl=JSON.parse(uploadFileRes.data).data[0];
+						// 		//that.goAddzdy(that.imgurl)
+						// 	}
+						// });
 			   
 					
 				}

utils/request.js

@@ -1,11 +1,11 @@
 //测试地址
-//const baseUrl = 'http://api.dms.66km.com.cn/'
+const baseUrl = 'http://api.dms.66km.com.cn/'
 //const baseUrl = 'http://192.168.0.124:20187/'
 //const baseUrl = 'http://syadmin.66km.com/'
 //正式地址-66
 //const baseUrl = 'http://apidms.66km.com/'
 //欧洲维修
-const baseUrl = 'https://crm.eurorepar.cn/'
+//const baseUrl = 'https://crm.eurorepar.cn/'
 import $store from '../store'
 
 const http = (url = '', date = {}, type = 'POST', header = {