x-wxml-to-canvas

介绍

• 基于uniapp目前仅测试小程序与h5
• 根据微信小程序wxml-to-canvas封装，支持的 css 属性及写法 一定一定 要 按 官方文档
• uni插件市场

使用

1、页面引用

import xWxmlToCanvas from '@/components/x-wxml-to-canvas/x-wxml-to-canvas';

2、components声明

components: {
		xWxmlToCanvas
	} 

3、使用

<xWxmlToCanvas ref="xWxmlToCanvas" :hide="true" :width="300" :height="300" :xStyle="style" :xWxml="wxml"></xWxmlToCanvas>

4、方法调用

this.$refs.xWxmlToCanvas.renderToCanvas() //渲染至canvas
this.$refs.xWxmlToCanvas.canvasToTempFilePath() //生成图片
this.$refs.xWxmlToCanvas.getCanvasImage() //获取图片
this.$refs.xWxmlToCanvas.saveImageToPhotosAlbum() //下载图片

相关字段

字段	类型	默认值	描述
isMode	Boolean	false	是否支持image标签的mode
hide	Boolean	false	canvas是否在页面可见 true 通过fixed将canvas移至屏幕外
width	Number	300	canvas宽度
height	Number	300	canvas高度
xWxml	String		wxml 模板
xStyle	Object	{}	样式
useCORS	Boolean	true	canvas 图片跨域

---

相关方法

方法名	描述	返回值
renderToCanvas	将wxml渲染至页面	无
canvasToTempFilePath	将canvas转为图片地址 (H5端 Canvas 内绘制的图像需要支持跨域访问才能成功)	promise函数，返回 图片地址，h5为base64
getCanvasImage	renderToCanvas 与 canvasToTempFilePath 合并	promise函数，返回 图片地址，h5为base64
saveImageToPhotosAlbum	图片保存至本地	promise函数，返回 true / flase

---