海报，背景半透明

百度网盘里面 ：海报，背景半透明

<view style="position:fixed; top:-4000rpx; left:-30000rpx; z-index:-1110000">
  <poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
  </poster>
</view>


<view class="curs a-c s-c flexc" style="{{iSposter ? 'display:flex;' : 'display:none'}}">

  <view class="cursBox" >
    <image class="curDelete"  bindtap="cancelPoster" src="../../../resourse/img/delete.png"></image>
    <image class="cursBoxImg" mode="aspectFit" catchlongpress='longpress' style="height:{{height/0.8}}rpx;width:{{width/0.8}}rpx" src="{{img}}"></image>
    <view class="cursBoxText">长按保存，分享海报给好友，好友下单就可以赚佣金啦，自己通过海报下单页会有返现哦！</view>
     <view class="cursBoxBut" bindtap="longpress"></view>
  </view>

</view>
<frame isShow='{{isShow}}' bind:confirm='confirm' bind:cancel='cancel'/>
<view class="layer "  catchtouchmove="ture" style="{{iSlayer ? 'top:0' : 'top:-5000rpx'}}">
  <view class="layerBox {{iSlayer ? 'footerDetailsa' : ''}}">
    <view class="layerBoxDelete" bindtap="DeleteSpecifications">
      <van-icon name="close" size="25" color="#999999"/>
    </view>

js

import Poster from '../../../components/wxa-plugin-canvas/poster/poster.js';


 /**
  * 异步生成海报
  */
  onCreatePoster(qrcode) {
    var that = this;
    let { height, width, detialsData} = this.data
    // setData配置数据
    that.setData({
      posterConfig: {
        width: width * 2,
        height: 1390,
        debug: true,
        pixelRatio: 1,
        preload: false,
        hideLoading: false,
        blocks: [
          {
            x: 0,
            y: 0,
            width: width * 2,
            height: 1390,
            backgroundColor: '#fff',
            zIndex: 0,
            borderRadius: 40,
          },{
          x: 60,
          y: 1240,
          width: 4,
          height: 100,
          backgroundColor: '#7d7d7d',
          zIndex: 1,
        },
        {
            x: 60,
            y: 1340,
            width: 100,
            height: 4,
            backgroundColor: '#7d7d7d',
            zIndex: 1,
          },
          {
            x: 400,
            y: 1160,
            width: 250,
            height: 50,
            backgroundColor: '#313131',
            zIndex: 10,
            borderRadius: 50,
            paddingLeft:25,
            paddingRight:25,
            text: {
              x: 455,
              y: 1190,
              width: 250,
              baseLine: 'middle',
              text: detialsData.startTime + '至' + detialsData.endTime + '限时售',
              fontSize: 26,
              textAlign: 'left',
              color: '#fff',
              zIndex: 11,
            }
          },
          {
            x: 0,
            y: 10,
            width: 150,
            height: 50,
            backgroundColor: 'rgba(0,0,0,0.3)',
            zIndex: 10,
            borderRadius: 50,
          }
        ],
        texts: [{
          x: 60,
          y: 930,
          width: width * 2 - 170,
          baseLine: 'middle',
          text: detialsData.title,
          fontSize: 36,
          textAlign: 'left',
          color: '#333333',
          lineNum:2,
          lineHeight:50,
          zIndex: 2,
          fontWeight: "bold",
          
        },
          {
            x: 70,
            y: 1080,
            width:500,
            fontWeight:"bold",
            baseLine: 'middle',
            text: '￥' +detialsData.price,
            fontSize: 64,
            textAlign: 'left',
            color: '#ff0000',
            lineHeight: 40,
            zIndex: 2,
          },
          {
            x: 320,
            y: 1080,
            width: 500,
            baseLine: 'middle',
            text: '￥'+detialsData.show_price,
            fontSize: 30,
            textAlign: 'left',
            color: '#d5d5d5',
            lineHeight: 40,
            zIndex: 2,
            textDecoration:"line-through"
          },
         
          {
            x: 435,
            y: 1280,
            width: 300,
            baseLine: 'middle',
            text: '长按图片，立即购买',
            fontSize: 26,
            textAlign: 'left',
            color: '#333333',
            zIndex: 11,
          },
          {
            x: 30,
            y: 38,
            width: 300,
            baseLine: 'middle',
            text: '馨璞信息',
            fontSize: 26,
            textAlign: 'left',
            color: '#fff',
            zIndex: 11,
          }
        ],
        lines: [

        ],
        images: [{
          x: 0,
          y: 0,
          url: detialsData.share_cover,
          width: width * 2,
          height: 840,
          zIndex: 2,
          // borderRadius: 30,
        },
          {
            x: 85,
            y: 1150,
            url: qrcode,
            width: 170,
            height: 170,
            zIndex: 2
          },
          {
            x: 285,
            y: 1170,
            url: '../../../resourse/img/Path.png',
            width: 81,
            height: 129,
            zIndex: 2
          }
        ]
      }
    }, () => {
      Poster.create();
    });
  },
  onPosterSuccess(e) {
    wx.hideLoading()
    this.setData({
      img: e.detail,
      // iSposter:true
    })
  },
  /**长按保存 */
  longpress(){
    //  wx.requestSubscribeMessage({
    //   tmplIds: ['MCgHPuchh5IghOvm23YxUWTZvOV2O7gnVlm1-qxo1t8'],
    //   success (res) { },
    //   complete:()=>{
        

    //   }
    // })
    let that = this
    wx.getImageInfo({
      src: that.data.img,
      success: function (res) {
        var path = res.path;
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success: function (res) {
            that.setData({
              iSposter:false
            })
            wx.showModal({
              title: '提示',
              content: '保存海报已成功',
              showCancel:false,
              success(res) {
                if (res.confirm) {
                  
                } else if (res.cancel) {

                }
              }
            })
          },
          fail: function (resa) {
            that.setData({
              iSposter: false
            })
            if (resa.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            wx.showModal({
              title: '提示',
              content: '请授权保存海报',
              showCancel: false,
              success(res) {
                if (res.confirm) {
                    wx.openSetting({
                      success(settingdata) {
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          
                        }else {
                          
                        }
                      }
                    })
                } else if (res.cancel) {
                }
              }
            })
          }else{

          }
            
          }
        })
      }
    });
  },
  //查看更多
  Tips(){
    this.setData({
      iStips: this.data.iStips ? false : true
    })
  },
  /**
   * 取消海报
   */
  cancelPoster(){
    this.setData({
      iSposter: this.data.iSposter ? false : true
    })


    // if (!this.data.iSposter){
    //   wx.requestSubscribeMessage({
    //     tmplIds: ['MCgHPuchh5IghOvm23YxUWTZvOV2O7gnVlm1-qxo1t8'],
    //     success (res) { },
    //     fail(error){
    //       console.log(error)
    //     },
    //     complete:()=>{
    //       if(!this.data.img){
    //         this.GoodsCode(this.data.detialsData.id)
    //       }else{
    
    //         this.setData({
    //           iSposter: this.data.iSposter ? false : true
    //         })
    //       }
    //     }
    //   })
      
    // }else{
    //   this.setData({
    //     iSposter: this.data.iSposter ? false : true
    //   })
    // }
    
  },
  /**获取商品小程序码 */
  GoodsCode(id){
    // wx.showLoading({ mask: true, title: '生成中'})
    wx.hideLoading()
    _http.request({
      url:`/goods/${id}/qrcode`
    }).then(res=>{
      if (res.qrcode){
        this.User()
        this.onCreatePoster(res.qrcode)
      }else{
        wx.hideLoading()
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      // detialsData: { start_time: ((new Date()).getTime() / 1000) - 1 },
      timestamp: (new Date()).getTime(),
    })
    this.Details(this.data.ids)
    
  },
`
百度网盘里面  海报