uniapp（在移动端）中收发的图片可缩放，可识别二维码，可保存至本地

这么个标题像极了分解的这聊天系统中收发消息的需求哈，没错，就是这么个需求。那么，现在就来一一给整理下：

首先呢，收发图片消息后正常渲染，解析出图片后点击图片会有一个放大图片的操作，即：

<!-- 接收图片消息 -->
<img v-if="message.msgBody.MsgType == 'Image'"
class="image-element"
:src="imageUrl(message.msgBody.MsgContent.url)"
@tap="handlePreview(message)"
>

这边强调下，uni下渲染 图片很多人会习惯用image标签。我是建议用img，因为在聊天框里收到的表情消息类型啊有的就是回荡是图片消息类型，那么很大程度上你在使用image标签时不管使用mode的那种模式都会被拉伸，即使你固定宽高也会是疼痛达不到你想要的效果。但是使用img则可以固定宽按比例拉伸。

携带想要的参数进入图片预览模式：

handlePreview(msg){
var sid = '';
if(msg.sessionId){
sid = msg.sessionId;
}else{
sid = msg.to.split(":")[1];
}
uni.navigateTo({
url:'../index/yulan?sid='+sid+'&url='+msg.msgBody.MsgContent.url
})

},

接着进入到预览页面。里面的结构很简单。但是里面来完成图片可缩放，可识别二维码，可保存至本地这三个需求。

<template>
<scroll-view style="width: 100vm;height: 100vh;" @touchstart="startMap" @touchmove="moveMap">
<view class="image-b" @tap="handlePreview()" @longpress="longTap" >
:style="'width:'+scaleWidth+'px;height: '+scaleHeight+'px;image-rendering: pixelated;align-self: center;'"></image> -->
<img :src="imgUrl" alt=""
class="image-element"
:style="{width:scaleWidth+'px',height:scaleHeight}"/>
</view>
</scroll-view>
</template>

数据部分：

data() {
return {
imgUrl:'',
loadUrl:'',
sid:'',
pictureHeight:0,
x:0,
y:0,
distance: 0, //手指移动的距离
scale: 1, //图片的比例
w:300, //图片真实宽度
h:400, //图片真实高度
scaleWidth:300, //图片设显示宽度
scaleHeight:"auto", //图片设显示高度
}
},

图片缩放逻辑书写：

startMap(e){
// 单手指缩放开始，不做任何处理
if (e.touches.length == 1) return;
// 当两根手指放上去的时候，将距离(distance)初始化。
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
//计算开始触发两个手指坐标的距离
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
this.distance = distance
},
moveMap(e){
if (e.touches.length == 1) return;
//双手指运动 x移动后的坐标和y移动后的坐标
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
//双手指运动新的 ditance
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
//计算移动的过程中实际移动了多少的距离
let distanceDiff = distance - this.distance;
let newScale = this.scale + 0.005 * distanceDiff

if (newScale >= 1 && newScale <= 3) {
let scaleWidth = newScale * this.w
let scaleHeight = newScale * this.h
this.distance= distance
this.scale= newScale
this.scaleWidth = scaleWidth
this.scaleHeight = scaleHeight
}else if(newScale >= 0.3 && newScale <= 1){
let scaleWidth = newScale * this.w
let scaleHeight = newScale * this.h
this.distance= distance
this.scale= newScale
this.scaleWidth = scaleWidth
this.scaleHeight = scaleHeight
}
},

 

长按识别二维码和保存图片至本地逻辑：

longTap(){
this.$api.getReqXml({
url:'/visitor/qim/deQRCode',
type:'POST',
reqJson:{
url:that.imgUrl,
sessionId:that.sid,
}
}).then(result=>{
console.log(result.data);
if(result.data){
that.loadUrl = result.data;
}else{
that.loadUrl = '识别失败';
}

var arr = ['保存到手机相册'];
if(that.loadUrl && that.loadUrl != "识别失败"){
arr = ['识别图中二维码', '保存到手机相册'];
}

uni.showActionSheet({
itemList: arr,
success: function (res) {
if(that.loadUrl.indexOf('http') > -1 && res.tapIndex == 0){
//window.open(that.loadUrl);
if(window.plus){
plus.runtime.openWeb(that.loadUrl);
}else{
window.location.href = that.loadUrl;
}

// uni.navigateTo({
// url:'codepage?url='+that.loadUrl
// })
}else if(that.loadUrl && res.tapIndex == 0 && arr.length > 1){
uni.showModal({
content:that.loadUrl
})
}else{
//保存图片
savePicture(that.imgUrl);
//window.location.href = that.imgUrl;
}
},
fail: function (res) {
console.log(res.errMsg);
}
});
})

function savePicture(Url){
console.log(url,'保存到相册的图片地址！！！！！');
if(window.plus){
//图片保存到手机后的路径
// var picname="_downloads/e"+new Date().getTime()+".png";
var dtask = plus.downloader.createDownload(Url, {}, function ( d, status ) {
// 下载完成
if ( status == 200 ) { 
// alert( "Download success: " + d.filename );
plus.gallery.save(d.filename,function() {//保存到相册方法
// mui.toast('已保存到手机相册');
uni.showModal({
content:"已保存到手机相册"
})
}, function() {
// mui.toast('保存失败，请重试！');
uni.showModal({
content:"保存失败，请重试！"
})
});
} else {
// alert( "Download failed: " + status ); 
}
});
//dtask.addEventListener( "statechanged", onStateChanged, false );
dtask.start();//开始下载
}else{
var blob=new Blob([''], {type:'application/octet-stream'});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = Url;
a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
// a.download = Url;
var e = document.createEvent('MouseEvents');
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
URL.revokeObjectURL(url);
}
}


}

 

点击预览：

handlePreview(){
window.history.back();
},

 

代码很全，但是识别二维码是基于在uni内的，自己慢慢消化哈！