For developers, documentation has been around for a long time, but not being familiar with it, especially on canvas, is a real headache. Inside Baidu search out is scum, are expired cases. Here’s the welfare. The document address

Basic steps:

Step 1: Download or clone

After downloading, find the wx_poster folder in the Components directory and copy it into your own project. Let’s say I put it in the Components folder.

Step 2: Import components

Find the page.json file you want to import. Then add wx_poster to usingComponents. For example (note the component path) :

{
  "usingComponents": {
    "wx_poster": "/components/wx_poster/wx_poster"}}Copy the code

Step 3: Use it in.wxss files

<wx_poster id="wx_poster"  showPoster="{{true}}"></wx_poster>

<! Below is the image used for rendering.
 <image style="width: {{width}}rpx; height: {{height}}rpx" src="{{imgSrc}}"></image>
Copy the code

Step 4: Use it in.js

That’s the point. We have to call initialization in onReady

// pages/demo/index.js
Page({
    /** * initial data for the page */
    data: {
        imgUrl: ' '.height: ' '.width: ' ',},/** * lifecycle function -- listens for page loading */
    onLoad: function (options) {},/** * lifecycle function - listen for the page to complete the first rendering */
    onReady: function () {
        var that = this;
        // get the dom object from the page
        var wx_poster = this.selectComponent('#wx_poster')
        // call inits to initialize
        wx_poster.inits(function (){ 
            console.log('Initialization completed')
            // 3, add poster width height, pictures, text and other methods add here
            wx_poster.addImg('https://uploadfile.bizhizu.cn/2015/0723/20150723061023750.jpg');
            wx_poster.setFont('I'm text content')
            wx_poster.draw(function () { // Draw successfully
                // Export the image
                wx_poster.generatePic(function (obj) {
                    if(obj.status) { // The export succeeded
                        consle.log('Export successful')
                        that.setData({
 // Set the view width and height.
                            width: obj.w,
                            height: obj.h
,
                             imgSrc: obj.tempFilePath
                        })
                    }else {
                        // Failed to export
                        consle.log('Export failed')}})})})},/ /... The code block
})
Copy the code

More documents:www.kancloud.cn/my_love1/wx…