New version of WeChat applet canvas2d poster drawing (teach you how to do it easily)

Effect

illustrate:

canvas官方很早已经发声不再维护了，所以很多方法都已经不再适用。目前官方推荐适用canvas2d来绘制生成海报。

---

canvas2dTo draw the poster :

canvas2d的优点：

For example:

1. There is no need to pre-download network images before drawing, the front end only needs to call network images.
2. For the new version of canvas2d poster, the official documentation is messy and difficult to develop.
3. anvas2d generates posters with high efficiency, low resource expenditure and strong performance.
4. Generating posters with ordinary canvas is slightly slower than canvas2d.
5. Through online methods, a large amount of development and implementation are carried out, and finally the components are packaged
6.  After the development was completed, we found that popular shopping malls such as Pinduoduo, Taobao, and JD.com were all using sharing posters like this.
7. To call a component, you only need to pass parameters, which is simple and efficient.
8. Unnecessary styles can be adjusted to your own characteristics.

---

How to implement:

1. Call json on the corresponding page

"usingComponents": {
    "share2d": "/Component/share2d/share2d"
  }

2. wxml page

<share2d id="share2d" bind:canvas_return="canvas_return" goods_data="{
   
   {share2d_goods_data}}" goods_img="{
   
   {combo.master_img_list[0]}}" share_type="combo"></share2d><!--胶囊固定转发海报-->

3. The js page calls the drawing method

const share2d = that.selectComponent('#share2d');
share2d.getposter();

4. After drawing the poster, return to the image path

canvas_return(e){
    console.log(e.detail)
    this.setData({
      canvas_return_img:e.detail
    })
 },

---

Summarize:

Guys who like it can go to the resources to download    the resources.