background

  • Recently, I have a small program project in hand. Last week, I received a demand that users can download a page locally and share it with friends/circle of friends (sharing here refers to sharing the current page as a thumbnail of the small program). The pages to be downloaded or shared are as follows:

  • What users need to download and share is the poster in the red box.
OK, requirements are clear. Let’s get started

  • Implementation, first time this type of requirement, two implementations are available online (there should be more)

    1. wxml-to-canvasSmall program through static template and style drawing canvas, export pictures, can be used to generate shared images and other scenes. The component is provided by wechat
    2. PainterA lightweight widget poster generation component. I used this implementation in my project because it supports visual drag and drop to generate Painter code. 1.Visual tool address ②Git address

    [PS] : The principle of the two implementation methods is the same. Provide material — draw canvas– generate pictures. Provide material: support rectangle, picture, text, etc. If you need a canvas, consider using wx. DownloadFile to convert the canvas into an image for material provision, which IS what I did in my project.

  • Analyze the composition of poster elements that users need to download, including pictures, text and canvas (the radar chart below is a canvas tag, which needs to be converted into pictures to provide materials)

  • Pull down Painter regit and place it in the component of your project, and register the component in the page you want to use.

.json "usingComponents": { "painter":".. /.. /components/painter/painter" }Copy the code
.wxml <painter :dirty="true" palette="{{paintPallette}}" bind:imgOK="onImgOK"bind:touchEnd="touchEnd" widthPixels="1000" /> // Palette material object //imgOK draws a successful callback //touchEnd draws a failed callbackCopy the code
Export Default class LastMayday {palette(params) {return ({"width": "375 px", "height" : "580 px", "background" : "# 040406", "views" : [{" type ":" image ", "url" : "network image", "CSS" : {" width ": "355px", "height": "560px", "top": "3px", "left": "10px", "rotate": "0", "borderRadius": "", "borderWidth": ""," borderColor ":" # 000000 ", "shadow" : ""," mode ":" scaleToFill "}}, {" type ":" image ", "url" : "network image", "CSS" : { "width": "11px", "height": "13px", "top": "16px", "left": "64px", "borderColor": "#000000", "mode": "scaleToFill" } }, { "type": "text", "text": params.point + '', "css": { "color": "#fff", "background": "Rgba (0,0,0,0)", "width" : "100 px", "height" : "20.02 px", "top" : "13 px", "left" : "81 px", "borderColor" : "#000000", "fontSize": "14px", "fontWeight": "normal", "maxLines": "2", "lineHeight": "20px", "textAlign": "Left"}}, {" type ":" image ", "url" : "network image", "CSS" : {" width ":" 211 px ", "height" : "209 px", "top" : "43 px", "left" : "82px", "borderColor": "#000000", "mode": "scaleToFill" } }, { "type": "text", "text": params.email, "css": { "color": "#d4d4d4", "width": "355px", "height": "18px", "top": "300px", "borderColor": "#000000", "fontSize": "13 px", "lineHeight" : "18", "textAlign" : "center"}}, {" type ":" image ", "url" : "network image", "CSS" : {" width ": "120px", "height": "80px", "top": "327px", "left": "130px", "borderColor": "#000000", "mode": "scaleToFill" } }, { "type": "text", "text": params.highestValue, "css": { "color": "#f5a623", "width": "355 px", "height" : "33.9 px", "top" : "344 px", "left" : "10 px", "borderColor" : "# 000000", "fontSize" : "30px", "fontWeight": "600", "lineHeight": "33px", "textAlign": "center" } }, { "type": "text", "text": params.highestValueLabel, "css": { "color": "#f5a623", "width": "355px", "height": "14px", "top": "381px", "left": "11px", "borderColor": "#000000", "fontSize": "12px", "fontWeight": "500", "lineHeight": "13.32px", "textDecoration": "None", "textAlign" : "center"}}, {" type ":" image ", "url" : params. RadarUrl, "CSS" : {" width ":" 348.55 px ", "height" : "129.46 px", "top" : "426 px", "left" : "12 px", "borderColor" : "# 000000"}}, {" type ":" text ", "text" : Params. The name, "CSS" : {" color ":" # 99 eff4 ", "background" : "rgba (0,0,0,0)", "width" : "177.5 px", "height" : "24 px", "top" : "266px", "left": "26px", "fontSize": "21px", "fontWeight": "600", "lineHeight": "23px", "fontFamily": "PingFangSC", "textAlign": "right" } }, { "type": "text", "text": params.position, "css": { "color": "# d4d4d4", "width" : "155 px", "height" : "15 px", "top" : "272 px", "left" : "207.5 px", "borderColor" : "# 000000", "fontSize" : "13px", "fontWeight": "normal", "lineHeight": "15px", "textDecoration": "none", "fontFamily": "PingFangSC", "textAlign": "left" } }, { "type": "rect", "css": { "background": "rgba(247, 107, 28, 1)", "width": "180px", "height": "180px", "top": "60px", "left": "98px", "borderRadius": "90px", "color": "rgba(247, 107, 28, 1)" } }, { "type": "rect", "css": { "background": "#000", "width": "162px", "height": "162px", "top": "69px", "left": "107px", "borderRadius": "76px", "color": "#000" } }, { "type": "image", "url": params.headUrl, "css": { "width": "150px", "height": "150px", "top": "74px", "left": "113px", "borderRadius": "75px", "borderColor": "#000000", "mode": "scaleToFill" } } ] } ); }}Copy the code
  • Import this file into your JS file

import Card from './card'

  • When appropriate to generate the corresponding canvas (user active trigger or page load complete? Depends on your needs)

This.setdata ({paintPallette: new Card().Palette (' need to dynamically generate parameters'),});

  • See if the drawable callback executes
OnImgOK (e) {console.log(e.daile.path) // Here, your poster has been generated successfully},Copy the code

  • The next step is the simplest one

    • share
    onShareAppMessage()
onShareTimeline()
Copy the code
    • Save to a local directory
    SaveImageToPhotosAlbum () // It needs to be noted that saving to local requires user authorization. What needs to be dealt with is: if the user clicks reject for the first time and wants to pull up the authorization box againCopy the code

    Above, did not post a lot of code, to train of thought, insufficient place please you big guy guidance ~