# 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>
</video>
<image src="{{src}}" style="width: {{width}}px height: {{height}}px"></image>

# Step4. js Get an instance

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

# wxml template

Support view、text、image 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>
  <view class= " item-box green" >
    <text class="text">yeah!</text>
  </view>
  <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>
  </view>
</view>

# 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 jpg、png 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