看了一个裁图的插件，尝试写了一下，没写出来，倒是写成了一个压缩的插件 特别粗糙，勉强能使，只写了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>