這么個標題像極了分解的這聊天系統中收發消息的需求哈,沒錯,就是這么個需求。那么,現在就來一一給整理下:
首先呢,收發圖片消息后正常渲染,解析出圖片后點擊圖片會有一個放大圖片的操作,即:
<!-- 接收圖片消息 -->
<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內的,自己慢慢消化哈!