直播海报分享优化显示

前端开发-陈颖阳
1 parent 47e9534a
Showing 3 changed files with 254 additions and 7 deletions
packageA/pages/liveStream/liveStream.js
packageA/pages/liveStream/liveStream.wxml
packageA/pages/liveStream/liveStream.wxss
@@ -46,7 +46,8 @@ Page({
     screenWidth: 0,
     canvasHidden: 1,
     gid: '',
-    shareImgPath: ''
+    shareImgPath: '',
+    shartitle:""
   },
   // list: [],
   // live: {
@@ -335,13 +336,15 @@ Page({
   // 分享操作表
   clickShare: function (e) {
       var sharimg = e.currentTarget.dataset.sharimg
+      var shartitle = e.currentTarget.dataset.shartitle
     if(!getApp().globalData.user_id){
        getApp().goto("/packageE/pages/togoin/togoin");
        return false;
     }
     this.setData({
       showActionSheet: !this.data.showActionSheet,
-      sharimg : sharimg
+      sharimg : sharimg,
+      shartitle:shartitle
     })
   },
@@ -406,7 +409,7 @@ Page({
     if(!this.data.coverImg) {
       // 请求主图
-      await that.getImageInfo(that.data['shareimg']).then(res => {
+      await that.getImageInfo(that.data.sharimg).then(res => {
         that.setData({
           coverImg: res.path,
           coverImgWidth: res.width,
@@ -446,7 +449,7 @@ Page({
     // 数据准备
-    const title = this.data.details.name;
+    const title = this.data.shartitle;
     // const headImg = app.globalData.userInfo['head_pic'];
     // console.log('----------------v', headImg);
@@ -573,6 +576,68 @@ Page({
   },
+
+  
+	imageResize(imgWidth, imgHeight) { 
+    var imageSize = {}; 
+    var originalWidth = imgWidth;//图片原始宽 
+    var originalHeight = imgHeight;//图片原始高 
+    var originalScale = originalHeight/originalWidth;//图片高宽比 
+    // console.log('originalWidth: ' + originalWidth) 
+    // console.log('originalHeight: ' + originalHeight)
+     
+    //获取屏幕宽高  
+    var winWidth = 480;
+    var winHeight = 380; 
+    var winScale = winHeight/winWidth;//屏幕高宽比 
+    // console.log('windowWidth: ' + winWidth) 
+    // console.log('windowHeight: ' + winHeight) 
+    if(originalScale < winScale){//图片高宽比小于屏幕高宽比 
+     //图片缩放后的宽为屏幕宽 
+      imageSize.imageWidth = winWidth; 
+      imageSize.imageHeight = (winWidth * originalHeight) / originalWidth; 
+    }else{//图片高宽比大于屏幕高宽比 
+     //图片缩放后的高为屏幕高 
+      imageSize.imageHeight = winHeight; 
+      imageSize.imageWidth = (winHeight * originalWidth) / originalHeight; 
+    }
+    console.log('缩放后的宽: ' + imageSize.imageWidth) 
+    console.log('缩放后的高: ' + imageSize.imageHeight) 
+    return imageSize; 
+   },
+
+
+//文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
+drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, unit) {
+  var lineWidth = 0;
+  var lastSubStrIndex = 0; //每次开始截取的字符串的索引
+  var han = 0;
+  for (let i = 0; i < str.length; i++) {
+    if (han == 2) return;
+    //lineWidth += ctx.measureText(str[i]).width;
+    lineWidth += ut.measureText(str[i], 21.3 * unit);
+    if (lineWidth > canvasWidth) {
+      han++;
+
+      if (han == 2) {
+        ctx.textAlign = 'justify';
+        ctx.fillText(str.substring(lastSubStrIndex, i) + '...', leftWidth, initHeight); //绘制截取部分
+      } else {
+        ctx.textAlign = 'justify';
+        ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight);
+      }
+      initHeight += 35; //22为字体的高度
+      lineWidth = 0;
+      lastSubStrIndex = i;
+      titleHeight += 20;
+    }
+    if (i == str.length - 1) { //绘制剩余部分
+      ctx.textAlign = 'justify';
+      ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
+    }
+  }
+},
+
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
@@ -694,7 +759,145 @@ Page({
 		});
 		return p;
-	},
+  },
+  
+
+   // 保存图片到手机
+   onSaveToPhone() {
+    var self = this;
+    // 获取用户的当前设置，返回值中有小程序已经向用户请求过的权限
+    this.getSetting().then((res) => {
+      // 判断用户是否授权了保存到相册的权限，如果没有发起授权
+      if (!res.authSetting['scope.writePhotosAlbum']) {
+        this.authorize().then(() => {
+          // 同意授权后保存下载文件
+          this.saveImageToPhotosAlbum(self.data.canvasToImgPath)
+        })
+      } else {
+        // 如果已经授权，保存下载文件
+        this.saveImageToPhotosAlbum(self.data.canvasToImgPath)
+      }
+    })
+  },
+
+  //打开设置，引导用户授权
+  onOpenSetting() {
+    wx.openSetting({
+      success:(res) => {
+        // console.log(res.authSetting)
+      }
+    })
+  },
+
+  // 获取用户已经授予了哪些权限
+  getSetting() {
+    return new Promise((resolve, reject) => {
+      wx.getSetting({
+        success: res => {
+          resolve(res)
+        }
+      })
+    })
+  },
+
+  // 发起首次授权请求
+  authorize() {
+    // isFirst 用来记录是否为首次发起授权，
+    // 如果首次授权拒绝后，isFirst赋值为1
+    let isFirst = wx.getStorageSync('isFirst') || 0;
+    return new Promise((resolve, reject) => {
+      wx.authorize({
+        scope: 'scope.writePhotosAlbum',
+        // 同意授权
+        success: () => {
+          resolve();
+        },
+        // 拒绝授权,这里是用户拒绝授权后的回调
+        fail: res => { 
+          if(isFirst === 0) {
+            wx.setStorageSync('isFirst', 1);
+            wx.showToast({
+              title: '保存失败',
+              icon: 'none',
+              duration: 1000
+            })
+          } else {
+            this.showModal();
+          }
+          console.log('拒绝授权');
+          reject();
+        }
+      })
+    })
+  },
+
+  //保存下载文件
+  savedownloadFile(img) {
+    this.downLoadFile(img).then((res) => {
+      return this.saveImageToPhotosAlbum(res.tempFilePath)
+    }).then(() => {
+      // resolve()
+    })
+  },
+
+  //单文件下载(下载文件资源到本地)，客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径。
+  downLoadFile(img) {
+    var self = this;
+    return new Promise((resolve, reject) => {
+      wx.showLoading({
+        title: '保存中...', 
+        mask: true,
+      });
+      wx.downloadFile({
+        url: img,
+        success: (res) => {
+          resolve(res);
+        }
+      })
+    })
+  },
+
+  // 保存图片到系统相册
+  saveImageToPhotosAlbum(saveUrl) {
+    var self = this;
+    return new Promise((resolve, reject) => {
+      wx.saveImageToPhotosAlbum({
+        filePath: saveUrl,
+        success: (res) => {
+          wx.showToast({
+            title: '保存成功',
+            duration: 1000,
+          });
+          self.setData({
+            showPlaybill: 'true'
+          });
+          resolve();
+        },
+        fail: () => {
+          wx.showToast({
+            title: '保存失败',
+            duration: 1000,
+          });
+        }
+      })
+    })
+  },
+
+
+  // 弹出模态框提示用户是否要去设置页授权
+  showModal() {
+    wx.showModal({
+      title: '检测到您没有打开保存到相册的权限，是否前往设置打开？',
+      success: (res) => {
+        if (res.confirm) {
+          console.log('用户点击确定')
+          this.onOpenSetting() // 打开设置页面          
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      }
+    })
+  },
 	/**
@@ -85,7 +85,7 @@
                 {{item['anchor_name']}}</view>
               </view>
               <view style="width: 30%;height: 90rpx;align-items: center;justify-items: center;">
-                <view bindtap="clickShare" data-sharimg="{{item.share_img}}" class="display: flex;" style="width: 70%;border-radius: 25rpx;border: 1rpx solid #fc6247;height: 46rpx;margin-top: 25rpx;margin-left: 30rpx;">
+                <view bindtap="clickShare" data-sharimg="{{item.share_img}}"  data-shartitle="{{item.name}}"  class="display: flex;" style="width: 70%;border-radius: 25rpx;border: 1rpx solid #fc6247;height: 46rpx;margin-top: 25rpx;margin-left: 30rpx;">
                   <view class="share-image"></view>
                   <view class="fs26" style="color: #fc6247;margin-left: 10rpx;line-height: 46rpx;"> 分享 </view>
                 </view>
@@ -257,6 +257,50 @@ subscribe {
 }
 .share-actionSheet.active ~ .mask,
+
+.mask {
+  display: none;
+  background-color: rgba(0,0,0,.7);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.playbill {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  background: none;
+}
+.share-actionSheet.active ~ .mask,
 .playbill.active ~ .mask {
   display: block;
-}
 \ No newline at end of file
+}
+.playbill-pic {
+  display: block;
+  width: 560rpx;
+  height: auto;
+  margin: 0 auto 26rpx;
+  border-radius: 10rpx;
+  overflow: hidden;
+}
+
+.playbill-save {
+  width: 560rpx;
+  height: 100rpx;
+  line-height: 100rpx;
+  background-color: #f23030;
+  color: #fff;
+  font-size: 36rpx;
+  text-align: center;
+  margin: 0 auto;
+}
+.playbill-save image {
+  width: 44rpx;
+  height: 36rpx;
+  margin-right: 23rpx;
+}
+