评论

微信小程序如何利用painter,简易的生成海报分享朋友圈功能

如果生成小程序海报分享朋友圈

这是生成的效果图,要完成这个功能其实只要引入第三方包就可以轻松的完成具体可参考:

原项目地址:https://github.com/Kujiale-Mobile/Painter

新版地址:https://github.com/shesw/Painter

1.首先在需要使用的页面引入

"usingComponents": {

    "painter":"../../components/painter/painter"

  }

2.这是我的wxml

<view class="box" >

  <painter :dirty='truecustomStyle='position: absolute; left: -9999rpx;palette="{{template}}bind:imgOK="canvasSuc" />

  <image mode="widthFixclass="box_imagesrc="{{image}}bindtap="previewImg" />

</view>

3.这是我的wxss

.box_image{

  position: absolute;

  margin: 0 auto;

  top: 0rpx;

  width: 514rpx;

  border-radius: 10rpx;


}

.box{

  position: fixed;

  height: 900rpx;

  top: 20%;

  left: 132rpx;

  z-index: 999;

  width:514rpx;


}

4.这是我的js

data:{

template: {},

image:""

}

  canvasSuc(e) {

    wx.hideLoading()

    this.setData({

      image: e.detail.path,

      show_share: false

    })

 },

 getDraw() {

    wx.showLoading({

      title: '正在努力生成中',

    })

    this.setData({

      template: {

        background: '#fff',

        width: 750 + 'rpx',

        height: 1200 + 'rpx',

        align: 'center',

        views: [{

          type: 'image',

          url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/%E5%BA%97%E9%93%BA%E6%B4%BB%E5%8A%A8-bg.png',

          css: {

            top: '0px',

            right: '0px',

            width: '750rpx',

            height: '900rpx',


            mode: "widthFix"

          },

        },

        {

          type: 'image',

          url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/%E6%96%87%E6%A1%88%E8%83%8C%E6%99%AF%403x.png',

          css: {

            top: '268rpx',

            right: '45rpx',

            width: '660rpx',

            height: '84rpx',


            mode: "widthFix"

          },

        },

        {

          type: 'image',

          url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/Cm8fPRsSXS.png',

          css: {

            top: '400rpx',

            left: '26rpx',

            width: '324rpx',

            height: '400rpx',


            mode: "widthFix"

          },

        },

        {

          type: 'image',

          url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/Cm8fPRsSXS.png',

          css: {

            top: '400rpx',

            right: '26rpx',

            width: '324rpx',

            height: '400rpx',


            mode: "widthFix"

          },

        },

        {

          type: 'image',

          url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/7785499/1592556154750/303876.jpg',

          css: {

            top: '400rpx',

            left

            : '26rpx',

            width: '324rpx',

            height: '300rpx',


            mode: "widthFix"

          },

        },

        {

          type: 'image',

          url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/7785499/1592556154750/303876.jpg',

          css: {

            top: '400rpx',

            right: '26rpx',

            width: '324rpx',

            height: '300rpx',


            mode: "widthFix"

          },

        },

        {

          type: 'image',

          url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/sMhA2YRBsd.png',

          css: {

            top: '660rpx',

            left: '26rpx',

            width: '320rpx',

            height: '60rpx',


            mode: "widthFix"

          },

        },

        {

          type: 'image',

          url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/sMhA2YRBsd.png',

          css: {

            top: '660rpx',

            right: '26rpx',

            width: '320rpx',

            height: '60rpx',


          },

        },

        {

          type: 'text',

          text: '60',

          css: {

            top: '670rpx',

            left: "66rpx",

            fontSize: '34rpx',

            color: "#fff",

           

          },

        },

        {

          type: 'text',

          text: '60',

          css: {

            top: '675rpx',

            left: "126rpx",

            fontSize: '28rpx',

            color: "#fff",

            textDecoration: 'line-through',

           

          },

        },

        {

          type: 'text',

          text: '60',

          css: {

            top: '670rpx',

            right: "266rpx",

            fontSize: '34rpx',

            color: "#fff",

           

          },

        },

        {

          type: 'text',

          text: '60',

          css: {

            top: '675rpx',

            right: "206rpx",

            fontSize: '28rpx',

            color: "#fff",

            textDecoration: 'line-through',

           

          },

        },

        {

          type: 'text',

          text: '商品名称名8个字',

          css: {

            top: '740rpx',

            right: "66rpx",

            fontSize: '34rpx',

            color: "#fff",

           

          },

        },

        {

          type: 'text',

          text: '商品名称名8个字',

          css: {

            top: '740rpx',

            left: "66rpx",

            fontSize: '34rpx',

            color: "#fff",

           

          },

        },

        {

          type: 'image',

          url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/1525ead3c1f45071184.png',

          css: {

            bottom: '40rpx',

            right: '40rpx',

            width: '200rpx',

            height: '200rpx',


          },

        },

        {

          type: 'image',

          url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/7785499/1592556154750/303876.jpg',

          css: {

            bottom: '70rpx',

            left: '40rpx',

            width: '160rpx',

            height: '160rpx',

            borderRadius: '50%',


          },

        },

        {

          type: 'text',

          text: '欢迎来到我的店铺',

          css: {

            top: '290rpx',

            left: "250rpx",

            fontSize: '34rpx',

            color: "#fff",

           

          },

        },

        {

          type: 'text',

          text: '店铺名称限制8字',

          css: {

            bottom: '160rpx',

            left: "200rpx",

            fontSize: '32rpx',

            color: "#000",

           

          },

        },

        {

          type: 'text',

          text: '邀请码:12345678',

          css: {

            bottom: '100rpx',

            left: "200rpx",

            fontSize: '28rpx',

            color: "#000",

           

          },

        },

        {

          type: 'text',

          text: '金戈多生鲜店铺',

          css: {

            top: '100rpx',

            left: "380rpx",

            fontSize: '48rpx',

            color: "#fff",

            align: 'center',

           

          },

        },

       

        ],

      }

    })

  },

  previewImg() {

    wx.previewImage({

      current: this.data.image,

      urls: [this.data.image],

      success:res=>{

        this.setData({

          isbox:false

        })

      }

    })

  },







最后一次编辑于  2020-08-11  
点赞 0
收藏
评论

2 个评论

  • 退格键
    退格键
    2020-12-20

    请问使用这个插件的项目上线了吗?我使用了painter以后,本地怎么测都ok。一到体验版,图片就没了,就像没有调用过这个插件似的。请问咋回事?

    2020-12-20
    赞同
    回复 1
    • 夕夜
      夕夜
      2021-04-13
      你在后台配置下图片域名就行
      2021-04-13
      回复
  • Mr.xue
    Mr.xue
    发表于移动端
    2020-08-12
    怎么用啊?
    2020-08-12
    赞同
    回复 1
    • 夕夜
      夕夜
      2020-08-12
      看我上面的操作,代码可以直接复制
      2020-08-12
      回复
登录 后发表内容