WeChat applet sharing circle of friends generates posters

WeChat applet implements sharing to Moments

Sharing Moments Nowadays, everyone’s common method is to generate a picture through Canvas Then save it and forward it to your circle of friends. A recent project had this requirement, so I recorded it.

If you want to jump directly to the specified page after scanning the QR code on the poster, then you need to generate a QR code with parameters. Take a look at the rendering first:

1. Write the code first

##index.wxml code:

<view class="container">
    <image src="{{shareImage}}" class="share-image"></image>
    <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>
    <button bind:tap="eventDraw">绘制</button>
    <button bind:tap="eventSave">保存到本地</button>
</view>

index.wxss code:

.share-image {
    width: 600rpx;
    height: 810rpx;  
    margin: 0 75rpx;  
    padding: 1px;  
    margin-top: 40px;
}
button {
    margin-top: 100rpx;
}

index.js code:

Page({
    data: {
        painting: {},
        shareImage: '',
    },
    onLoad() {
        this.eventDraw()
    },
    eventDraw() {
        var that = this;
        wx.showLoading({
            title: '绘制分享图片中',
            mask: true
        })
        this.setData({
            painting: {
                width: 375,
                height: 568,
                clear: true,
                views: [
                  //这个是一个纯白的图片,给整个画布一个白背景,要不然会有马赛克
                  {
                    type: 'image',
                    url: 'https://XXX.com/weixin/item/bai.jpg',
                    width: 375,
                    height: 568
                  },
                  //边框,直接拿了一张图,当做边框
                  {
                    type: 'image',
                    url: 'https://XXXXX.com/weixin/item/biankuang.png',
                    width: 375,
                    height: 568
                  },
                  //商品图
                  {
                    type: 'image',
                    url: 'https://XXX.com/seafood/public78fffad452d2e158636b.jpg',
                    width: 328,
                    height: 328,
                    top:20,
                    left:22,
                  },
                  //商品名称
                  {
                    type: 'text',
                    content: '产品名称产品11111',
                    fontSize: 20,
                    lineHeight: 21,
                    color: '#000000',
                    textAlign: 'left',
                    top: 360,
                    left: 36,
                    width: 290,
                    MaxLineNumber: 2,
                    breakWord: true,
                    bolder: true
                  },
                  //线条,同样也是用的图
                  {
                    type: 'image',
                    url: 'https://XXXX.com/weixin/item/xiantiao.png',
                    width: 325,
                    height: 5,
                    top: 443,
                    left:22
                  },
                  //商品价格
                  {
                      type: 'text',
                      content: '￥198.00',
                      fontSize: 20,
                      color: '#E62004',
                      textAlign: 'left',
                      top: 414,
                      left: 36,
                      bolder: true
                  },
                  //名称
                  {
                    type: 'text',
                    content: '名称名称',
                    fontSize: 15,
                    lineHeight: 21,
                    color: '#7E7E8B',
                    textAlign: 'left',
                    top: 414,
                    left: 267,
                    width: 70,
                    MaxLineNumber: 1,
                    breakWord: true,
                  },
                  // 文字, 打不出这个文字带阴影的效果, 所以也用的图
                  {
                    type: 'image',
                    url: 'https://XXXX.com/weixin/item/wenzi.png',
                    width: 145,
                    height: 75,
                    top: 460,
                    left: 36,
                  },
                  //二维码
                  {
                    type: 'image',
                    url: 'https://XXXX.com/Public/Home/images/banner/min_code.jpg',
                    top: 455,
                    left: 260,
                    width: 85,
                    height: 85
                  },
                ]
            }
        })
    },
    eventSave() {
        wx.saveImageToPhotosAlbum({
            filePath: this.data.shareImage,
            success(res) {
                wx.showToast({
                    title: '保存图片成功',
                    icon: 'success',
                    duration: 2000
                })
            }
        })
    },
    eventGetImage(event) {
        console.log(event)
        wx.hideLoading()
        const {
            tempFilePath,
            errMsg
        } = event.detail
        if (errMsg === 'canvasdrawer:ok') {
            this.setData({
                shareImage: tempFilePath
            })
        }
    }
})

Inside index.json Code:

{
  "navigationBarTitleText": "生成海报",
  "usingComponents": {
    //在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行)
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer" 
  }
}

Component download address:

链接：https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset 
提取码：8hrj

2. Object structure

1. The first layer of the data object requires three parameters: width, height, views. All numbers in the configuration are unitless. This means that canvas draws a proportional image. To determine the specific display size, simply place the returned image path in the image tag.

2. Currently, three types of configurations can be drawn: image, text, and rect. The configured attributes basically use camel case names of css, which are relatively easy to understand.

image (picture)

##Properties url##toptop left corner The distance from the top of the artboardleftThe distance from the upper left corner to the left side of the artboard How wide to drawHow high to draw

Meaning

Default value

Optional value

The drawn image address, which can be Local image, such as: /images/1.jpeg

#width

0

height

0

##

text (text)

##AttributesMeaningDefault valueOptional valuecontentDraw textDefault is emptycolorColorblackfontSizeFont size16textAlignText alignmentleftcenter, left, rightlineHeightline height , only useful in multi-line text20##topleft##breakWordWhether a line break is requiredfalsetrue, false MaxLineNumberMaximum number of lines. Only when breakWord: true is set, the current attribute is valid. Content exceeding the number of lines is displayed as...2##width

The distance between the upper left corner of the text and the top of the artboard The distance	0
The distance between the upper left corner of the text and the left side of the artboard	0
Used in conjunction with the MaxLineNumber property, width is the width to achieve line breaks 0

#bolder

Whether to boldfalsetrue, falsetextDecorationDisplay the underline and underline effectsnoneunderline, line-through

rect (rectangle, line)

##PropertiesMeaningDefault valueOptional valuebackgroundBackground color blacktopThe distance between the upper left corner and the top of the artboard##leftwidth## heightHow high to draw0##This method Drawing posters for WeChat mini programs is very simple and easy to understand, and you can learn from each other.

The distance between the upper left corner and the left side of the artboard
How wide to draw	0

The above is the detailed content of WeChat applet sharing circle of friends generates posters. For more information, please follow other related articles on the PHP Chinese website!