Applet using canvas canvas to achieve the current page and share screenshots

Sometimes the need to share some applet dynamically generated images, such as page screenshots, merchandise cards, virtual cards coupons and so on. But applets are not open page screenshot of the interface, that is up to the provision of equipment screenshots event monitoring API.

To solve this problem, with the exception canvas canvas synthesis, there is no other better solution. Here we are introduced to the micro-channel small program used to simulate the canvas page screenshots and share features. Specific code as follows:

index.wxml

1  <! - Dynamic Image Synthesis canvas -> 
2  < Canvas Canvas-ID = "Sharebox" > </ Canvas > 
. 3  <! - Dynamic Image Synthesis canvas End -> 
. 4  <! - page display portion -> 
. 5  < View ID = "Content" > 
. 6    < View class = "F0" > < Image class = "goodsImg" the src = "/ imgs / demo.jpg" > </ Image > </ View > 
. 7    <view class="goodsTitle">
 8     < View class = "goodsName" > Haagen 298 yuan Ice Cream Cake </ View > 
. 9      < View class = "goodsPrice" > 298.00 membered </ View > 
10    </ View > 
. 11  </ View > 
12 is  <! - page display section End ->

index.js

. 1 const = App getApp ()
 2  // size proportional calculation (page 750, whichever has a width, i.e. 750 * scale, multiplied by the Scale all sizes, can be compatible with various sizes of the screen) 
. 3 const = wx.getSystemInfoSync Scale (). windowWidth / 750
 . 4  Page ({
 . 5    Data: {
 . 6      shareUrl: ""
 . 7    },
 . 8    the onLoad (E) {
 . 9    },
 10    the onReady: function () {
 . 11      the this .drawShareImage ()
 12 is    },
 13 is    drawShareImage () {
 14      // draw canvas picture 
15      // create a canvas objects 
16     wx.createCanvasContext CTX = const ( 'Sharebox', the this );
 . 17      // this.drawNormalText (CTX, "Canvas generated image", 0, 0, 30, '#FFFFFF', 'left', 'Middle') 
18 is      // goods master FIG 
. 19      var bgSize1 = 750/500
 20 is      the this .drawImage (CTX, "/imgs/demo.jpg", 20 is, 20 is, 710, 710 / bgSize1);
 21 is      // draw title product portion 
22 is      var bgSize2 = 750/246
 23 is      the this .drawImage (CTX, "/imgs/detail-name-bg.jpg", 20 is, 490 is, 710, 710 / bgSize2);
 24      // draw title share 
25      the this.drawNormalText(ctx, "canvas生成的图片", 50, 548, 30, '#ffffff', 'left', 'middle')
26     this.drawNormalText(ctx, "230.00元", 50, 660, 30, 'red', 'left', 'middle')
27     this.drawNormalText(ctx, "230.00元", 50 + 1, 660, 30, 'red', 'left', 'middle')
28     this.drawNormalText(ctx, "230.00元", 50, 660 + 1, 30, 'red', 'left', 'middle')
29     this.drawNormalText(ctx, "230.00元", 50 + 1, 660 + 1, 30, 'red', 'left', 'middle'32Math.PI)
     ctx.arc (Scale * 120, 120 * Scale, 80 * Scale, 0, *. 5 * Scale31 isdrawing canvas tag (draw a circle and hatched)//30)
     
     ctx.setFillStyle ( '# 22aaff' )
 33 is      ctx.setShadow (0, 0, * Scale 20 is, "#AAAAAA" )
 34 is      ctx.fill ()
 35      the this .drawNormalText (CTX, "the Canvas", 1 18, 100, 30, 'White', 'Center', 'Middle' )
 36      the this .drawNormalText (CTX, "synthesis", 1 18, 140, 30, 'White', 'Center', 'Middle' )
 37 [  
38 is      // draw the canvas, and obtaining temporary canvas callback file path   
39      var Self = the this 
40      ctx.draw ( to true , function () {
 41 is        wx.canvasToTempFilePath ({
 42 is          canvasId:'shareBox',
43         success(res) {
44           console.log(res)
45           if (res.tempFilePath) {
46             self.setData({
47               shareUrl: res.tempFilePath
48             })
49             wx.setStorageSync("shareUrl", res.tempFilePath)
50           }
51         }
52       })
53     });
54   },
55   //绘制图片封装
56   drawImage(ctx, url, x, y, w, h) {
57     ctx.drawImage(url, x * scale, y * scale, w * scale, h * scale);
58   },
59   // 绘制只有一行的文字
60   drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
61     ctx.setFontSize(font * scale);
62     ctx.setFillStyle(style);
63     ctx.setTextAlign(align);
64     ctx.setTextBaseline(baseLine);
65     ctx.fillText(str, x * scale, y * scale);
66   },
67   //onShareAppMessage(res) {}
68 })

Precautions:

1.canvas and there is no similar adaptation unit rpx like, you need to define in advance the page size ratio, it is conducive to different screen compatibility. Specific code as follows:

const scale = wx.getSystemInfoSync().windowWidth / 750

All dimensions in 2.canvas to 750 as the standard, i.e. to the general design draft size, the actual size of the drawing, all multiplied by the size standard can accommodate all sizes of screens. If required, the function may be drawn to some logic packages, such as text, images.

1    // drawn picture package 
2    the drawImage (CTX, URL, X, Y, W, H) {
 . 3      ctx.drawImage (URL, Scale X *, Y * Scale, Scale W *, H * Scale);
 . 4    },
 . 5    // draw only one line of text 
. 6    drawNormalText (CTX, STR, X, Y, font, style, align = left, BaseLine) {
 . 7      ctx.setFontSize (font * Scale);
 . 8      ctx.setFillStyle (style);
 . 9      ctx.setTextAlign ( align = left);
 10      ctx.setTextBaseline (BaseLine);
 . 11      ctx.fillText (STR, Scale X *, Y * Scale);
 12 is    },