Applet usando tela de lona para alcanzar la página actual y compartir capturas de pantalla

A veces, la necesidad de compartir algunos applet de imágenes generadas dinámicamente, como capturas de pantalla de páginas, tarjetas de mercancía, tarjetas cupones virtuales y así sucesivamente. Sin embargo, los applets no están abiertas página de captura de pantalla de la interfaz, que es hasta la provisión de API de imágenes de equipos para eventos de supervisión.

Para resolver este problema, con la excepción de síntesis tela de lona, ​​no hay otra solución mejor. Aquí se nos presenta al programa de pequeñas micro-canal utilizado para simular las capturas de pantalla de páginas de la lona y comparten características. código específico de la siguiente manera:

index.wxml

1  <! - imagen dinámica de lona Síntesis -> 
2  < lienzo Lona-ID = "Sharebox" > </ lienzo > 
3.  <! - imagen dinámica Síntesis de la lona End -> 
4.  <! - porción de visualización de la página -> 
. 5  < Ver ID = "contenido" > 
. 6    < Ver clase = "F0" > < imagen clase = "goodsImg" del src = "/ IMG / Demo.jpg" > </ imagen > </ Ver > 
. 7    <vista de clase = "goodsTitle" > 
8     < Ver clase = "goodsName" > Haagen 298 yuanes torta del helado </ Ver > 
. 9      < Ver clase = "goodsPrice" > 298.00 miembros </ Vista > 
10    </ Vista > 
11.  </ Vista > 
12 es  <! - página de la sección de visualización End ->

index.js

. 1 const = App getapp ()
 2  // tamaño cálculo proporcional (página 750, lo que tiene una anchura, es decir, 750 escala *, multiplicado por la escala de todos los tamaños, puede ser compatible con diversos tamaños de la pantalla) 
. 3 const = wx.getSystemInfoSync Escala (). WindowWidth / 750
 . 4  Página ({
 . 5    datos: {
 . 6      shareUrl: ""
 7.    },
 8.    la onLoad (E) {
 9.    },
 10    la onReady: función () {
 . 11      el este .drawShareImage ()
 12 es    },
 13 es    drawShareImage () {
 14      // dibujar la imagen de lona 
15      // crear objetos de un lienzo 
16     wx.createCanvasContext CTX = const ( 'Sharebox', el este );
 . 17      // this.drawNormalText (CTX, "lienzo imagen generada", 0, 0, 30, '# FFFFFF', 'izquierda', 'medio') 
18 es      // bienes maestro Fig 
. 19      var bgSize1 = 750/500
 20 es      el este .drawImage (CTX, "/imgs/demo.jpg", 20 es decir, 20 es decir, 710, 710 / bgSize1);
 21 se      // porción dibujar producto del título 
22 es      var bgSize2 = 750/246
 23 es      el este .drawImage (CTX, "/imgs/detail-name-bg.jpg", 20 es decir, 490 es decir, 710, 710 / bgSize2);
 24      // dibujar cuota de título 
25      del este.drawNormalText (CTX, "lienzo生成的图片", 50, 548, 30, '#ffffff', 'izquierda', 'medio' )
 26 de      esta .drawNormalText (CTX, "230.00元", 50, 660, 30, ' rojo', 'izquierda', 'medio' )
 27      esta .drawNormalText (ctx, "230.00元", 50 + 1, 660, 30, 'rojo', 'izquierda', 'medio' )
 28      esta .drawNormalText (ctx, "230.00元", 50, 660 + 1, 30, 'rojo', 'izquierda', 'medio' )
 29      esta .drawNormalText (ctx, "230.00元", 50 + 1, 660 + 1, 30, 'rojo' , 'izquierda', 'medio')
 30      // dibujo etiqueta canvas (dibujar un círculo y sombreada) 
31 se      ctx.arc (Escala * 120, 120 * Escala, 80 * Escala, 0, *. 5 * Escala Math.PI)
 32     ctx.setFillStyle ( '# 22aaff' )
 33 es      ctx.setShadow (0, 0, * Escala 20 es, "#AAAAAA" )
 34 es      ctx.fill ()
 35      de la presente .drawNormalText (CTX, "la mano", 1 18, 100, 30, 'White', 'Center', 'medio' )
 36      del presente .drawNormalText (CTX, "síntesis", 1 18, 140, 30, 'White', 'Center', 'medio' )
 37 [  
38 es      // dibujar la lona, y la obtención de la ruta del archivo de devolución de llamada de lona temporal   
39      var Auto = el presente 
40      ctx.draw ( true , la función () {
 41 es        wx.canvasToTempFilePath ({
 42 es          canvasId:'Sharebox' ,
43          de éxito (res) {
 44            console.log (res)
 45            si (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 * escala, y * escala, w escala *, h * escala);
58    },
 59    // 绘制只有一行的文字
60    drawNormalText (ctx, str, x, y, fuente, estilo, align, la línea de base) {
 61      ctx.setFontSize (fuente * escala);
62      ctx.setFillStyle (estilo);
63      ctx.setTextAlign (align);
64      ctx.setTextBaseline (línea de base);
65      ctx.fillText (str, x * escala, y * escala);
66    },
 67    // onShareAppMessage (res) {} 
68 })

precauciones:

1.canvas y no hay ninguna unidad de adaptación rpx similar como, es necesario definir de antemano la relación de tamaño de página, que es propicio para diferentes pantallas compatibles. código específico de la siguiente manera:

escala const = wx.getSystemInfoSync (). WindowWidth / 750

Todas las dimensiones en 2.canvas a 750 como el estándar, es decir, para el diseño proyecto de tamaño en general, el tamaño real del dibujo, todos multiplicado por el estándar de tamaño pueden acomodar todos los tamaños de pantallas. Si es necesario, la función puede ser atraído por algunos paquetes lógicos, tales como texto, imágenes.

1    // dibujado conjunto de imágenes 
2    la drawImage (CTX, URL, X, Y, W, H) {
 3.      Ctx.drawImage (URL, Escala X *, Y * Escala, Escala W *, H * Escala);
 . 4    },
 . 5    // dibujar sólo una línea de texto 
6.    drawNormalText (CTX, STR, X, Y, fuente, estilo, align = izquierda, línea de base) {
 7.      ctx.setFontSize (fuente * Escala);
 . 8      ctx.setFillStyle (estilo);
 . 9      ctx.setTextAlign ( align = izquierda);
 10      ctx.setTextBaseline (línea de base);
 . 11      ctx.fillText (STR, Escala X *, Y * Escala);
 12 es    },