uin-app 使用canvas压缩图片

看了一个裁图的插件，尝试写了一下，没写出来，倒是写成了一个压缩的插件
特别粗糙，勉强能使，只写了h5和小程序的，把h5的图片转成了blob格式

贴代码：

<template name="tupian">
		<view class="ks">
			<view v-if="img.statc==0||img.zhuang" style="text-align: center;">
				<view class="zi-teda zi-hui">+</view>
				<view class="zi-xiao zi-hui">{{tit}}</view>
			</view>
			<image :class="img.zhuang?'cla':''"  @load="jiazai" v-if="img.statc==1" :src="img.src" mode="widthFix"></image>
			<!-- <image  v-if="srcss" :src="srcss" mode="widthFix"></image> -->
			<view>
				<canvas :style="{width: canwid+'px',height: canhei+'px'}" canvas-id="firstCanvas"></canvas>
			</view>
		</view>
</template>

<script>
	export default {
	        name: "tupian",
	        data() {
	            return {
					canwid:300,
					canhei:300*0.8,
					daxiao:false,
					srcss:null,
					img:{},
	            };
	        },
	        // 此处定义传入的数据
	        props: {
	           imgss:{},
			   tit:null
	        },
			mounted(){
			    this.$nextTick(()=>{ // 页面渲染完成后的回调s
					this.img = this.imgss;
				})
			},
			methods: {
				childMethod(e) {
					this.img = this.imgss;
					this.imgs();
					
				},
				// 拍照
				imgs(){
					let that = this;
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album','camera'], //从相册选择
						success: function (res) {
							that.img.statc = 1;
							if(res.tempFiles[0].size<=(1024*1024)){
									
									that.$set(that.img,'src', res.tempFilePaths[0]);
									that.daxiao = false;
									let data = {};
									data.ya = 0;
									// #ifdef H5
									data.src = res.tempFiles[0]
									// #endif
									// #ifndef H5
									data.src = res.tempFilePaths[0]
									// #endif
									that.$emit('onimg',data)
									return false;
							}else{
								console.log(222)
								that.imgss.src = res.tempFilePaths[0];
								that.daxiao = true;
							}
						}
					});
				},
				jiazai(e){
					if(this.daxiao){
						this.imginfo(this.img.src)
					}else{
						return false;
					}
					
				},
				// 获取图片信息
				imginfo(src){
					let that = this;
					uni.getImageInfo({
						src: src,
						success: function (image) {
							let bili = image.height/image.width;
							that.canwid = image.width>300?300:image.width;
							that.canhei = (image.width>300?300:image.width)*bili;
							setTimeout(function() { //必须延迟执行 不然H5不显示
							// #ifndef MP-WEIXIN
							that.canva(src,that.canwid,that.canhei) //必须加上 uniapp 没这儿玩意儿 显示不出来不比原生 不加可以显示
							// #endif
								// #ifdef MP-WEIXIN
								that.canxcx(src,that.canwid,that.canhei)
								// #endif
								
							}, 200)
						}
					});
				},
				// 画布
				canva(src,imgwid,imghei){
					let that= this;
					let img = new Image(imgwid,imghei);
						img.src = src; // 要压缩的图片  
					let canvas = document.createElement('canvas');
					canvas.width = imgwid;
					canvas.height = imghei;
					let ctx = canvas.getContext('2d');
					//  将图片画到canvas上面   使用Canvas压缩 
						setTimeout(function() { },200)
					ctx.drawImage(img, 0, 0, imgwid, imghei);
					// 画布转成图片
				   canvas.toBlob(function (fileSrc) {
						let imgSrc = window.URL.createObjectURL(fileSrc);//原生JS生成文件路径
						 that.srcss = imgSrc;
						 let data = {};
						 data.ya = 1;
						 data.src = imgSrc;
						 console.log(imgSrc)
						 that.$emit('onimg',data)
				   });
					  
				},
				// 小程序画布
				canxcx(src,imgwid,imghei){
					const sysInfo = uni.getSystemInfoSync();
					const pixelRatio = sysInfo.pixelRatio
					let that= this;
					this.canwid = imgwid;
					this.canhei = imghei;
					var context = uni.createCanvasContext('firstCanvas',this);
					 context.drawImage(src, 0, 0, imgwid, imghei);
					context.draw(false, () => {
						uni.canvasToTempFilePath({
						  destWidth: imgwid*pixelRatio,
						  destHeight: imghei*pixelRatio,
						  canvasId: 'firstCanvas',
						  success: function(res) {
						    that.srcss = res.tempFilePath;
							let data = {};
							 data.ya = 1;
							data.src = res.tempFilePath;
							 that.$emit('onimg',data)
						  },
						  fail:function(res){
							uni.showModal({
							    title: '提示',
							    content: '图片压缩失败'
							})
						  }
						},this)
					});
				}
				
			}
	        
	}
</script>

<style>
	@import url('/components/gonggong/gonggong.css');
	.ks{
		width: 100%;
		min-height: 100%;
		background-color:#F7F7F7;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
	}
	.k image{
		width: 100%;
	}
	canvas,.cla{
		position: absolute;
		left: -1000px;
	}
</style>