# wxml-to-canvas

Drawing with static templates and styles in Mini Program canvas Export images that can be used to generate shared images and other scenarios.Code snippet

# Methods of Use

# Step1. npm Installation, reference Mini Programs npm Support

npm install --Save. wxml-to-canvas

# Step2. JSON Component declaration

  "usingComponents": {
    "wxml-to-canvas": "wxml-to-canvas",

# Step3. wxml Introducing components

<video class="video" src="{{src}}">
  <wxml-to-canvas class="widget"></wxml-to-canvas>
<image src="{{src}}" style="width: {{width}}px height: {{height}}px"></image>

# Step4. js Get an instance

const {wxml, style} = require('./demo.js')
  data: {
    src: ''
  onLoad() {
    this.Widget = this.selectComponent('.widget')
  renderToCanvas() {
    const p1 = this.Widget.renderToCanvas({ wxml, style })
    p1.then((nothing) => {
      this.container = nothing
  extraImage() {
    const p2 = this.Widget.canvasToTempFilePath()
    p2.then(nothing => {
        src: nothing.tempFilePath,
        width: this.container.layoutBox.width,
        height: this.container.layoutBox.height

# wxml template

Support viewtextimage Three labels, via class to mate or marry style Gets or sets the style in the.

<view class="container" >
  <view class= " item-box red">
  <view class= " item-box green" >
    <text class="text">yeah!</text>
  <view class= " item-box blue ">
      <image class="img" src="https://Ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/U = 3582589792,4046843010 & Gt; 26 & Gt; 0.jpg'></image>

# style

Object property values correspond to wxml Label class Hump form.Need to specify for each element width and height attributeOtherwise, it will cause layout errors.

There are multiple className The next element has higher priority, and the child element inherits the inheritable attributes of the parent element.

Elements are all flex Layout. left/top etc. Only absolute Take effect under positioning.

const style = {
  container: {
    width: 300,
    height: 200,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ccc',
    alignItems: 'center',
  itemBox: {
    width: 80,
    height: 60,
  red: {
    backgroundColor: '#ff0000'
  green: {
    backgroundColor: '#00ff00'
  blue: {
    backgroundColor: '#0000ff'
  text: {
    width: 80,
    height: 60,
    textAlign: 'center',
    verticalAlign: 'middle',

# interface

# f1. renderToCanvas({wxml, style}): Promise

Render to Canvas, pass in wxml template and style Object that contains layout and style information.

# f2. canvasToTempFilePath({fileType, quality}): Promise

Extract the contents of the container area in the canvas to generate an image of the same size and return the temporary file address.

fileType Support jpgpng Two formats, quality For the quality of the picture, currently only for the jpg Effective. The value range is (0, 1]When out of range 1.0 Handle.

# Supportive css attribute

Attribute name Supported values or types Default values
width number 0
height number 0
position relative, absolute relative
left number 0
top number 0
right number 0
bottom number 0
margin number 0
padding number 0
borderWidth number 0
borderRadius number 0
flexDirection column, row row
flexShrink number 1
flexGrow number
flexWrap wrap, nowrap nowrap
justifyContent flex-start, center, flex-end, space-between, space-around flex-start
alignItems, alignSelf flex-start, center, flex-end, stretch flex-start

Support marginLeft、paddingLeft etc.

# Written words

Attribute name Supported values or types Default values
fontSize number 14
lineHeight number / string '1.4em'
textAlign left, center, right left
verticalAlign top, middle, bottom top
color string #000000
backgroundColor string transparent

lineHeight Desirable belt in The string or numeric type of the unit.

# deformation

Attribute name Supported values or types Default values
scale number 1