创新互联小程序教程：微信小程序扩展组件·绘制canvas

wxml-to-canvas

小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景。

创新互联公司-专业网站定制、快速模板网站建设、高性价比乐陵网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式乐陵网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖乐陵地区。费用合理售后完善，十多年实体公司更值得信赖。

使用方法

Step1. npm 安装

npm install --save wxml-to-canvas

Step2. JSON 组件声明

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

Step3. wxml 引入组件

Step4. js 获取实例

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((res) => {
      this.container = res
      this.extraImage()
    })
  },
  extraImage() {
    const p2 = this.widget.canvasToTempFilePath()
    p2.then(res => {
      this.setData({
        src: res.tempFilePath,
        width: this.container.layoutBox.width,
        height: this.container.layoutBox.height
      })
    })
  }
})

wxml 模板

支持 view、text、image 三种标签，通过 class 匹配 style 对象中的样式。

  
  
  
    yeah!
  
  
      
  

样式

对象属性值为对应 wxml 标签的 cass 驼峰形式。需为每个元素指定 width 和 height 属性，否则会导致布局错误。

存在多个 className 时，位置靠后的优先级更高，子元素会继承父级元素的可继承属性。

元素均为 flex 布局。left/top 等 仅在 absolute 定位下生效。

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',
  }
}

接口

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

渲染到 canvas，传入 wxml 模板 和 style 对象，返回的容器对象包含布局和样式信息。

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

提取画布中容器所在区域内容生成相同大小的图片，返回临时文件地址。

fileType 支持 jpg、png 两种格式，quality 为图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。

支持的 css 属性

布局相关

属性名	支持的值或类型	默认值
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

支持 marginLeft、paddingLeft 等

文字

属性名	支持的值或类型	默认值
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 可取带 em 单位的字符串或数字类型。

变形

属性名	支持的值或类型	默认值
scale	number	1

分享文章：创新互联小程序教程：微信小程序扩展组件·绘制canvas
分享链接：http://www.csdahua.cn/qtweb/news38/293538.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网