小程序海报分享轮播

 

<!--html-->

 <view bindtap="changeYL">点击分享</view>


<!--弹出页面代码-->
 <view class="modal-mask1" bindtap="hideModal"  wx:if="{{showModal}}"></view>
<view class="modal-dialog1" wx:if="{{showModal}}">

    <view class='swiper'>
        <swiper indicator-dots="{{false}}" autoplay="{{false}}" circular="true" previous-margin="{{'140rpx'}}" next-margin="{{'140rpx'}}" bindchange="swiperChange">
          <block wx:for="{{imgUrls}}" wx:key="{{index}}">
            <swiper-item>
               <image src="{{swiperIndex == index ? imagePath:item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/>  
                <canvas canvas-id="mycanvas_{{index}}"  class="canvas"></canvas>  

            </swiper-item>
          </block>
        </swiper>
    </view>
  
  <view class="model-services1">
    <view class="sharehy">
        <button open-type='share'class="sharehy_weixin" plain="true">
            <image src="https://xcx.hy720.com/wtt/weiixn2.png"></image>
            <view class="cube-text">
              <text>分享好友</text>
            </view>
        </button>
        <button class="sharehy_weixin" bindtap='saveThumb'>
          <image src="https://xcx.hy720.com/wtt/xiazai1.png"></image>
          <view class="cube-text">
            <text>保存图片</text>
          </view>
        </button>
    </view>
  </view>
</view> 

<!--css-->

 .modal-mask1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  z-index: 1000;
}
 
.modal-dialog1 {
  overflow: hidden;
  position: fixed;
  z-index: 1000;
  top: 120rpx;


} 
/* .view-image1{
  width: 500rpx;
  height: 750rpx;
  z-index: 1000;
  display: block; 
} */
 .model-services1 {
    width: 100%;
    position: fixed;
    background-color: #fff;
    bottom: 0;
    z-index: 1000;
    height: 220rpx;
    border-radius: 30rpx 30rpx 0rpx 0rpx ;
    left: 0rpx;
}
.model-services1 .sharehy{width: 500rpx;height: 200rpx; margin: 0 auto;display: flex;flex-wrap: wrap;padding-top: 30rpx;margin-bottom: 10rpx;}
.model-services1 .sharehy_weixin{width: 170rpx;height: 180rpx;text-align: center;background-color: #fff;}
.model-services1 image{width: 100%;height: 110rpx;padding-bottom: 15rpx;max-width: 110rpx;}
.model-services1 .cube-text {
    position: relative;
    width: 120rpx;
    height: 30rpx;
    line-height: 30rpx;
    color: #000;
    margin-top: -30rpx;
    font-size: 28rpx;
} 
/*弹出页面样式*/


.swiper{
  width: 750rpx;
  height: 900rpx;
  z-index: 1000;
   display: block; 
  }
.swiper swiper{
  width: 750rpx;
  height: 900rpx;
}
.swiper swiper-item{
  padding-top: 80rpx;
}
.swiper swiper image{
  width: 375rpx;
  height: 667rpx;
  position: absolute;
  left: 50%;
  margin-left: -188rpx;
} 

image.active{
  transform: scale(1.14);
  transition:all .2s ease-in 0s;
}

.canvas {
  position: absolute !important;
  display: block !important;
  width: 450rpx;
  height: 667rpx;
  z-index: 100;
  
}

<!--js-->

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      '/images/d1.jpg',
      '/images/d2.jpg',
      '/images/d3.jpg'
    ],
    swiperIndex: 0,
    fx_img: "",
    
  },
  swiperChange(e) {

    var that = this;
    var i = e.detail.current;   //通过swiper的current值绑定显示的图片
    var img = that.data.imgUrls;   //滑动swiper会显示img
    that.setData({
      swiperIndex: e.detail.current,
      imagePath: img[i]   //img中的swiper的current值绑定显示的图片i里面的image就是最前面显示的图片，也是下载图片
    });
    // wx.downloadFile({
    //   url: that.data.userInfo.avatarUrl, //下载用户头像
    //   success: function (res) {
    //     that.setData({
    //       tx_img: res.tempFilePath  //头像
    //     })
    //   }
    // })
    wx.downloadFile({
      url: imgUrls[i], //仅为示例，并非真实的资源
      success: function (res) {
        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
        if (res.statusCode === 200) {
          console.log("下载到本地成功")
          that.setData({
            fx_img: res.tempFilePath
          })
        }
        setTimeout(function () {
          console.log("开始绘制")
          that.createNewImg();
        }, 50);
      }
    })
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    var that = this;
    var context = wx.createCanvasContext('mycanvas_' + that.data.swiperIndex);
    context.setFillStyle("#ffffff")
    context.fillRect(0, 0, 375, 667)
    console.log(that.data.fx_img);
    var path = that.data.fx_img;
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    //不知道是什么原因，手机环境能正常显示
    context.drawImage(path, 0, 0, 375, 667);
    //var path1 = that.data.tx_img;
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    //var path2 = "../../images/hyw.jpg";
    //不知道是什么原因，手机环境能正常显示
    // context.save(); // 保存当前context的状态

    var name = that.data.userInfo.nickName;
    //绘制名字
    context.setFontSize(12);
    context.setFillStyle('#787878');
    context.setTextAlign('left');
    context.fillText(name, 37, 575);
    context.stroke();
    //绘制标语
    context.setFontSize(18);
    context.setFillStyle('#333333');
    context.setTextAlign('left');
    context.fillText("美好生活@好友味", 37, 600);
    context.stroke();
    //绘制标语    
    context.setFontSize(12);
    context.setFillStyle('#ffffff');
    context.setTextAlign('left');
    context.fillText("长按识别小程序码", 37, 626);
    context.stroke();
    //绘制左下角文字背景图
    //context.drawImage(path2, 245, 548, 90, 90);
    //绘制头像
    // context.arc(56, 539, 21, 0, 2 * Math.PI) //画出圆
    // context.strokeStyle = "#ffe200";
    // context.clip(); //裁剪上面的圆形
    // context.drawImage(path1, 33, 518, 44, 44); // 在刚刚裁剪的园上画图
     context.draw();
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas_' + that.data.swiperIndex,
        success: function (res) {
          console.log("绘制成功2");
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 200);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  //弹出页面
  changeYL: function (e) {
    var that = this;
    that.setData({
      showModal: true,
      swiperIndex: e.detail.current,
      imagePath: that.data.imgUrls[0]
    })   

    // wx.downloadFile({
    //   url: that.data.userInfo.avatarUrl, //下载用户头像  头像的路径
    //   success: function (res) {
    //     that.setData({
    //       tx_img: res.tempFilePath  //把url虚拟路径赋值给tx_img  就是一个完整的装有头像的参数
    //     })
    //   }
    // })
    wx.downloadFile({
      url: that.data.imgUrls[0], //仅为示例，并非真实的资源  图片路径
      success: function (res) {
        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
        if (res.statusCode === 200) {
          console.log("下载到本地成功")
          that.setData({
            fx_img: res.tempFilePath  //虚拟路径中的图片  tempFilePath==url
          })
          console.log("fx_img11" + fx_img)
        }
        setTimeout(function () {
          console.log("开始绘制")
          that.createNewImg();
        }, 100);
      }
    })

  },

  saveThumb: function (t) {
    wx.showLoading();
    var e = this,
      a = this.data.imagePath;
    wx.getImageInfo({
      src: a,
      success: function (t) {
        var a = t.path;
        a && wx.saveImageToPhotosAlbum({
          filePath: a,
          success: function (t) {
            console.log(t), wx.hideLoading(), wx.showToast({
              title: "已保存相册",
              icon: "none",
              duration: 2e3
            }), e.setData({
              hideModal: !0
            });
          },
        });
      }
    });
  },

  hideModal: function () {
    this.setData({
      showModal: false
    });
  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})