# x-wxml-to-canvas **Repository Path**: xyzgy/x-wxml-to-canvas ## Basic Information - **Project Name**: x-wxml-to-canvas - **Description**: 基于微信小程序 wxml-to-canvas 改版的 uni版本的 html-to-canvas - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 9 - **Forks**: 4 - **Created**: 2021-01-24 - **Last Updated**: 2024-01-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### 使用 #### 1、页面引用 * 确保已执行npm install ``` import xWxmlToCanvas from '@/components/x-wxml-to-canvas/x-wxml-to-canvas'; ``` #### 2、components声明 ``` components: { xWxmlToCanvas } ``` #### 3、使用 ``` ``` #### 4、方法调用 ``` this.$refs.xWxmlToCanvas.renderToCanvas() //渲染至canvas this.$refs.xWxmlToCanvas.canvasToTempFilePath() //生成图片 this.$refs.xWxmlToCanvas.getCanvasImage() //获取图片 this.$refs.xWxmlToCanvas.saveImageToPhotosAlbum() //下载图片 ``` #### 个人使用微信官方wxml-to-canvas中踩坑 * 需为每个元素指定 width 和 height 属性，否则会导致布局错误（text等） * 宽度、字体大小为number类型 * 属性值为字符串，需要加引号 * 元素均为flex布局，但在style中仍需要指定 flexDirection ，样式写法不需要 #### 示例代码对比 ##### 1、wxml 无区别 (只显示标签及类名) 可直接通过` `引入作为wxml ##### 2、css 区别

.container {
	width: 350px;
	height: 500px;
	background: #fff;
	border-radius: 20px;
	padding: 20px;
}
.img {
	width: 310px;
	height: 310px;
}
.wrap {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}
.wraptext {
	display: inline-block;
	font-size: 13px;
	padding-right:10px;
}
.wrapimg {
	width: 60px;
	height: 60px;
}

container: {
	width: 350,
	height: 500,
	backgroundColor: '#fff',
	borderRadius: 20,
	padding: 20
},
img: {
	width: 310,
	height: 310
},
wrap: {
	flexDirection: 'row',
	justifyContent: 'space-between',
	marginTop: 10
},
wraptext: {
	width:210,
	height:60,
	fontSize: 13,
	paddingRight: 10
},
wrapimg: {
	width: 60,
	height: 60
}