{"_id":"wxml-to-canvas","_rev":"3670784","name":"wxml-to-canvas","description":"[](https://www.npmjs.com/package/wxml-to-canvas) [](https://github.com/wechat-miniprogram/wxml-to-canvas)","dist-tags":{"latest":"1.1.1"},"maintainers":[{"name":"wechat-miniprogram","email":""}],"time":{"modified":"2025-02-13T05:41:04.000Z","created":"2019-11-05T13:31:41.582Z","1.1.1":"2020-03-24T06:41:44.812Z","1.1.0":"2020-03-17T01:40:31.920Z","1.0.3":"2020-02-18T12:23:56.159Z","1.0.2":"2019-11-06T02:38:32.019Z","1.0.1":"2019-11-05T14:19:14.109Z","1.0.0":"2019-11-05T13:31:41.582Z"},"users":{},"author":{"name":"sanfordsun"},"repository":{"type":"git","url":""},"versions":{"1.1.1":{"name":"wxml-to-canvas","version":"1.1.1","description":"[](https://www.npmjs.com/package/wxml-to-canvas) [](https://github.com/wechat-miniprogram/wxml-to-canvas)","main":"miniprogram_dist/index.js","scripts":{"dev":"gulp dev --develop","watch":"gulp watch --develop --watch","build":"gulp","dist":"npm run build","clean-dev":"gulp clean --develop","clean":"gulp clean","test":"jest --bail","test-debug":"node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --bail","coverage":"jest ./test/* --coverage --bail","lint":"eslint \"src/**/*.js\" --fix","lint-tools":"eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\" --fix"},"miniprogram":"miniprogram_dist","jest":{"testEnvironment":"jsdom","testURL":"https://jest.test","collectCoverageFrom":["src/**/*.js"],"moduleDirectories":["node_modules","src"]},"repository":{"type":"git","url":""},"author":{"name":"sanfordsun"},"license":"MIT","devDependencies":{"colors":"^1.3.1","eslint":"^5.14.1","eslint-config-airbnb-base":"13.1.0","eslint-loader":"^2.1.2","eslint-plugin-import":"^2.16.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^3.8.0","gulp":"^4.0.0","gulp-clean":"^0.4.0","gulp-if":"^2.0.2","gulp-install":"^1.1.0","gulp-less":"^4.0.1","gulp-rename":"^1.4.0","gulp-sourcemaps":"^2.6.5","jest":"^23.5.0","miniprogram-simulate":"^1.0.0","through2":"^2.0.3","vinyl":"^2.2.0","webpack":"^4.29.5","webpack-cli":"^3.3.10","webpack-node-externals":"^1.7.2"},"dependencies":{"widget-ui":"^1.0.2"},"gitHead":"7085f6334d2bea53c92ecff8b53175cc0912584f","_id":"wxml-to-canvas@1.1.1","_nodeVersion":"10.15.3","_npmVersion":"6.14.2","dist":{"shasum":"64771473fb1e251bdad94f8c6ffa7dd64290e7ca","size":11142,"noattachment":false,"key":"/wxml-to-canvas/-/wxml-to-canvas-1.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/wxml-to-canvas/download/wxml-to-canvas-1.1.1.tgz"},"maintainers":[{"name":"wechat-miniprogram","email":""}],"_npmUser":{"name":"wechat-miniprogram","email":"wx-miniprogram@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wxml-to-canvas_1.1.1_1585032104695_0.2929215416944755"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-24T18:11:03.022Z","publish_time":1585032104812,"_cnpm_publish_time":1585032104812},"1.1.0":{"name":"wxml-to-canvas","version":"1.1.0","description":"[](https://www.npmjs.com/package/wxml-to-canvas) [](https://github.com/wechat-miniprogram/wxml-to-canvas)","main":"miniprogram_dist/index.js","scripts":{"dev":"gulp dev --develop","watch":"gulp watch --develop --watch","build":"gulp","dist":"npm run build","clean-dev":"gulp clean --develop","clean":"gulp clean","test":"jest --bail","test-debug":"node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --bail","coverage":"jest ./test/* --coverage --bail","lint":"eslint \"src/**/*.js\" --fix","lint-tools":"eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\" --fix"},"miniprogram":"miniprogram_dist","jest":{"testEnvironment":"jsdom","testURL":"https://jest.test","collectCoverageFrom":["src/**/*.js"],"moduleDirectories":["node_modules","src"]},"repository":{"type":"git","url":""},"author":{"name":"sanfordsun"},"license":"MIT","devDependencies":{"colors":"^1.3.1","eslint":"^5.14.1","eslint-config-airbnb-base":"13.1.0","eslint-loader":"^2.1.2","eslint-plugin-import":"^2.16.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^3.8.0","gulp":"^4.0.0","gulp-clean":"^0.4.0","gulp-if":"^2.0.2","gulp-install":"^1.1.0","gulp-less":"^4.0.1","gulp-rename":"^1.4.0","gulp-sourcemaps":"^2.6.5","jest":"^23.5.0","miniprogram-simulate":"^1.0.0","through2":"^2.0.3","vinyl":"^2.2.0","webpack":"^4.29.5","webpack-cli":"^3.3.10","webpack-node-externals":"^1.7.2"},"dependencies":{"widget-ui":"^1.0.2"},"gitHead":"c7a729dce68fe8ad9eab07cd467c5308971f05a4","_id":"wxml-to-canvas@1.1.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"wechat-miniprogram","email":"wx-miniprogram@qq.com"},"dist":{"shasum":"a15182b74a6f901e4702c17895c319f9e33cec28","size":11645,"noattachment":false,"key":"/wxml-to-canvas/-/wxml-to-canvas-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/wxml-to-canvas/download/wxml-to-canvas-1.1.0.tgz"},"maintainers":[{"name":"wechat-miniprogram","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wxml-to-canvas_1.1.0_1584409231815_0.7713397845600385"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-24T18:11:02.922Z","publish_time":1584409231920,"_cnpm_publish_time":1584409231920},"1.0.3":{"name":"wxml-to-canvas","version":"1.0.3","description":"[](https://www.npmjs.com/package/wxml-to-canvas) [](https://github.com/wechat-miniprogram/wxml-to-canvas)","main":"miniprogram_dist/index.js","scripts":{"dev":"gulp dev --develop","watch":"gulp watch --develop --watch","build":"gulp","dist":"npm run build","clean-dev":"gulp clean --develop","clean":"gulp clean","test":"jest --bail","test-debug":"node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --bail","coverage":"jest ./test/* --coverage --bail","lint":"eslint \"src/**/*.js\" --fix","lint-tools":"eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\" --fix"},"miniprogram":"miniprogram_dist","jest":{"testEnvironment":"jsdom","testURL":"https://jest.test","collectCoverageFrom":["src/**/*.js"],"moduleDirectories":["node_modules","src"]},"repository":{"type":"git","url":""},"author":{"name":"sanfordsun"},"license":"MIT","devDependencies":{"colors":"^1.3.1","eslint":"^5.14.1","eslint-config-airbnb-base":"13.1.0","eslint-loader":"^2.1.2","eslint-plugin-import":"^2.16.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^3.8.0","gulp":"^4.0.0","gulp-clean":"^0.4.0","gulp-if":"^2.0.2","gulp-install":"^1.1.0","gulp-less":"^4.0.1","gulp-rename":"^1.4.0","gulp-sourcemaps":"^2.6.5","jest":"^23.5.0","miniprogram-simulate":"^1.0.0","through2":"^2.0.3","vinyl":"^2.2.0","webpack":"^4.29.5","webpack-cli":"^3.3.10","webpack-node-externals":"^1.7.2"},"dependencies":{"widget-ui":"^1.0.2"},"gitHead":"aa78be48eb614d6b1f1d5316094148ede7a986af","_id":"wxml-to-canvas@1.0.3","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"wechat-miniprogram","email":"wx-miniprogram@qq.com"},"dist":{"shasum":"5a12b2430cd9aba6cc9a09b108a3b4d02e0ae388","size":10607,"noattachment":false,"key":"/wxml-to-canvas/-/wxml-to-canvas-1.0.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/wxml-to-canvas/download/wxml-to-canvas-1.0.3.tgz"},"maintainers":[{"name":"wechat-miniprogram","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wxml-to-canvas_1.0.3_1582028636028_0.9534286267950691"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-24T18:11:01.213Z","publish_time":1582028636159,"_cnpm_publish_time":1582028636159},"1.0.2":{"name":"wxml-to-canvas","version":"1.0.2","description":"[](https://www.npmjs.com/package/wxml-to-canvas) [](https://github.com/wechat-miniprogram/wxml-to-canvas)","main":"miniprogram_dist/index.js","scripts":{"dev":"gulp dev --develop","watch":"gulp watch --develop --watch","build":"gulp","dist":"npm run build","clean-dev":"gulp clean --develop","clean":"gulp clean","test":"jest --bail","test-debug":"node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --bail","coverage":"jest ./test/* --coverage --bail","lint":"eslint \"src/**/*.js\" --fix","lint-tools":"eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\" --fix"},"miniprogram":"miniprogram_dist","jest":{"testEnvironment":"jsdom","testURL":"https://jest.test","collectCoverageFrom":["src/**/*.js"],"moduleDirectories":["node_modules","src"]},"repository":{"type":"git","url":""},"author":{"name":"sanfordsun"},"license":"MIT","devDependencies":{"colors":"^1.3.1","eslint":"^5.14.1","eslint-config-airbnb-base":"13.1.0","eslint-loader":"^2.1.2","eslint-plugin-import":"^2.16.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^3.8.0","gulp":"^4.0.0","gulp-clean":"^0.4.0","gulp-if":"^2.0.2","gulp-install":"^1.1.0","gulp-less":"^4.0.1","gulp-rename":"^1.4.0","gulp-sourcemaps":"^2.6.5","jest":"^23.5.0","miniprogram-simulate":"^1.0.0","through2":"^2.0.3","vinyl":"^2.2.0","webpack":"^4.29.5","webpack-cli":"^3.3.10","webpack-node-externals":"^1.7.2"},"dependencies":{"widget-ui":"^1.0.2"},"gitHead":"1d99b122c2928e3be428026b7fae4bee5a436b68","_id":"wxml-to-canvas@1.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"wechat-miniprogram","email":"wx-miniprogram@qq.com"},"dist":{"shasum":"339085148032a0eaef731c2a8ace5f112b66531f","size":11283,"noattachment":false,"key":"/wxml-to-canvas/-/wxml-to-canvas-1.0.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/wxml-to-canvas/download/wxml-to-canvas-1.0.2.tgz"},"maintainers":[{"name":"wechat-miniprogram","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wxml-to-canvas_1.0.2_1573007911861_0.7380320168727059"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-24T18:11:00.343Z","publish_time":1573007912019,"_cnpm_publish_time":1573007912019},"1.0.1":{"name":"wxml-to-canvas","version":"1.0.1","description":"[](https://www.npmjs.com/package/wxml-to-canvas) [](https://github.com/wechat-miniprogram/wxml-to-canvas)","main":"miniprogram_dist/index.js","scripts":{"dev":"gulp dev --develop","watch":"gulp watch --develop --watch","build":"gulp","dist":"npm run build","clean-dev":"gulp clean --develop","clean":"gulp clean","test":"jest --bail","test-debug":"node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --bail","coverage":"jest ./test/* --coverage --bail","lint":"eslint \"src/**/*.js\" --fix","lint-tools":"eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\" --fix"},"miniprogram":"miniprogram_dist","jest":{"testEnvironment":"jsdom","testURL":"https://jest.test","collectCoverageFrom":["src/**/*.js"],"moduleDirectories":["node_modules","src"]},"repository":{"type":"git","url":""},"author":{"name":"sanfordsun"},"license":"MIT","devDependencies":{"colors":"^1.3.1","eslint":"^5.14.1","eslint-config-airbnb-base":"13.1.0","eslint-loader":"^2.1.2","eslint-plugin-import":"^2.16.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^3.8.0","gulp":"^4.0.0","gulp-clean":"^0.4.0","gulp-if":"^2.0.2","gulp-install":"^1.1.0","gulp-less":"^4.0.1","gulp-rename":"^1.4.0","gulp-sourcemaps":"^2.6.5","jest":"^23.5.0","miniprogram-simulate":"^1.0.0","through2":"^2.0.3","vinyl":"^2.2.0","webpack":"^4.29.5","webpack-cli":"^3.3.10","webpack-node-externals":"^1.7.2"},"dependencies":{"widget-ui":"^1.0.2"},"gitHead":"f0b503ec7a69b4ad3e2f00974412254396d56b72","_id":"wxml-to-canvas@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"wechat-miniprogram","email":"wx-miniprogram@qq.com"},"dist":{"shasum":"83c55787c905499fd3aca69b5cbdc67ee807881f","size":11332,"noattachment":false,"key":"/wxml-to-canvas/-/wxml-to-canvas-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/wxml-to-canvas/download/wxml-to-canvas-1.0.1.tgz"},"maintainers":[{"name":"wechat-miniprogram","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wxml-to-canvas_1.0.1_1572963553970_0.0822351782331796"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-24T18:10:59.470Z","publish_time":1572963554109,"_cnpm_publish_time":1572963554109},"1.0.0":{"name":"wxml-to-canvas","version":"1.0.0","description":"[](https://www.npmjs.com/package/wxml-to-canvas) [](https://github.com/wechat-miniprogram/wxml-to-canvas)","main":"miniprogram_dist/index.js","scripts":{"dev":"gulp dev --develop","watch":"gulp watch --develop --watch","build":"gulp","dist":"npm run build","clean-dev":"gulp clean --develop","clean":"gulp clean","test":"jest --bail","test-debug":"node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --bail","coverage":"jest ./test/* --coverage --bail","lint":"eslint \"src/**/*.js\" --fix","lint-tools":"eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\" --fix"},"miniprogram":"miniprogram_dist","jest":{"testEnvironment":"jsdom","testURL":"https://jest.test","collectCoverageFrom":["src/**/*.js"],"moduleDirectories":["node_modules","src"]},"repository":{"type":"git","url":""},"author":{"name":"sanfordsun"},"license":"MIT","devDependencies":{"colors":"^1.3.1","eslint":"^5.14.1","eslint-config-airbnb-base":"13.1.0","eslint-loader":"^2.1.2","eslint-plugin-import":"^2.16.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^3.8.0","gulp":"^4.0.0","gulp-clean":"^0.4.0","gulp-if":"^2.0.2","gulp-install":"^1.1.0","gulp-less":"^4.0.1","gulp-rename":"^1.4.0","gulp-sourcemaps":"^2.6.5","jest":"^23.5.0","miniprogram-simulate":"^1.0.0","through2":"^2.0.3","vinyl":"^2.2.0","webpack":"^4.29.5","webpack-cli":"^3.3.10","webpack-node-externals":"^1.7.2"},"dependencies":{"css-to-object":"^1.1.0","widget-ui":"^1.0.2"},"gitHead":"f0b503ec7a69b4ad3e2f00974412254396d56b72","_id":"wxml-to-canvas@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"wechat-miniprogram","email":"wx-miniprogram@qq.com"},"dist":{"shasum":"7f89c2f2220a19875ce72089c032684d1d3da926","size":10931,"noattachment":false,"key":"/wxml-to-canvas/-/wxml-to-canvas-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/wxml-to-canvas/download/wxml-to-canvas-1.0.0.tgz"},"maintainers":[{"name":"wechat-miniprogram","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wxml-to-canvas_1.0.0_1572960701384_0.4358892321443961"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-24T18:10:58.601Z","publish_time":1572960701582,"_cnpm_publish_time":1572960701582}},"readme":"# wxml-to-canvas\n\n[](https://www.npmjs.com/package/wxml-to-canvas)\n[](https://github.com/wechat-miniprogram/wxml-to-canvas)\n\n小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景。[代码片段](https://developers.weixin.qq.com/s/r6UBlEm17pc6)\n\n\n## 使用方法\n\n#### Step1. npm 安装，参考 [小程序 npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)\n\n```\nnpm install --save wxml-to-canvas\n```\n\n#### Step2. JSON 组件声明\n\n```\n{\n \"usingComponents\": {\n \"wxml-to-canvas\": \"wxml-to-canvas\",\n }\n}\n```\n\n#### Step3. wxml 引入组件\n\n```\n\n\n```\n\n##### 属性列表\n\n| 属性 | 类型 | 默认值 | 必填 | 说明 |\n| --------------- | ------- | ------- | ---- | ---------------------- |\n| width | Number | 400 | 否 | 画布宽度 |\n| height | Number | 300 | 否 | 画布高度 |\n\n\n#### Step4. js 获取实例\n\n```\nconst {wxml, style} = require('./demo.js')\nPage({\n data: {\n src: ''\n },\n onLoad() {\n this.widget = this.selectComponent('.widget')\n },\n renderToCanvas() {\n const p1 = this.widget.renderToCanvas({ wxml, style })\n p1.then((res) => {\n this.container = res\n this.extraImage()\n })\n },\n extraImage() {\n const p2 = this.widget.canvasToTempFilePath()\n p2.then(res => {\n this.setData({\n src: res.tempFilePath,\n width: this.container.layoutBox.width,\n height: this.container.layoutBox.height\n })\n })\n }\n})\n```\n\n## wxml 模板\n\n支持 `view`、`text`、`image` 三种标签，通过 class 匹配 style 对象中的样式。\n\n```\n\n \n \n \n yeah!\n \n \n \n \n\n```\n\n## 样式\n\n对象属性值为对应 wxml 标签的 cass 驼峰形式。**需为每个元素指定 width 和 height 属性**，否则会导致布局错误。\n\n存在多个 className 时，位置靠后的优先级更高，子元素会继承父级元素的可继承属性。\n\n元素均为 flex 布局。left/top 等 仅在 absolute 定位下生效。\n\n```\nconst style = {\n container: {\n width: 300,\n height: 200,\n flexDirection: 'row',\n justifyContent: 'space-around',\n backgroundColor: '#ccc',\n alignItems: 'center',\n },\n itemBox: {\n width: 80,\n height: 60,\n },\n red: {\n backgroundColor: '#ff0000'\n },\n green: {\n backgroundColor: '#00ff00'\n },\n blue: {\n backgroundColor: '#0000ff'\n },\n text: {\n width: 80,\n height: 60,\n textAlign: 'center',\n verticalAlign: 'middle',\n }\n}\n```\n\n## 接口\n\n#### f1. `renderToCanvas({wxml, style}): Promise`\n\n渲染到 canvas，传入 wxml 模板 和 style 对象，返回的容器对象包含布局和样式信息。\n\n#### f2. `canvasToTempFilePath({fileType, quality}): Promise`\n\n提取画布中容器所在区域内容生成相同大小的图片，返回临时文件地址。\n\n`fileType` 支持 `jpg`、`png` 两种格式，quality 为图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。\n\n## 支持的 css 属性\n\n### 布局相关\n\n| 属性名 | 支持的值或类型 | 默认值 |\n| --------------------- | --------------------------------------------------------- | ---------- |\n| width | number | 0 |\n| height | number | 0 |\n| position | relative, absolute | relative |\n| left | number | 0 |\n| top | number | 0 |\n| right | number | 0 |\n| bottom | number | 0 |\n| margin | number | 0 |\n| padding | number | 0 |\n| borderWidth | number | 0 |\n| borderRadius | number | 0 |\n| flexDirection | column, row | row |\n| flexShrink | number | 1 |\n| flexGrow | number | |\n| flexWrap | wrap, nowrap | nowrap |\n| justifyContent | flex-start, center, flex-end, space-between, space-around | flex-start |\n| alignItems, alignSelf | flex-start, center, flex-end, stretch | flex-start |\n\n支持 marginLeft、paddingLeft 等\n\n### 文字\n\n| 属性名 | 支持的值或类型 | 默认值 |\n| --------------- | ------------------- | ----------- |\n| fontSize | number | 14 |\n| lineHeight | number / string | '1.4em' |\n| textAlign | left, center, right | left |\n| verticalAlign | top, middle, bottom | top |\n| color | string | #000000 |\n| backgroundColor | string | transparent |\n\nlineHeight 可取带 em 单位的字符串或数字类型。\n\n### 变形\n\n| 属性名 | 支持的值或类型 | 默认值 |\n| ------ | -------------- | ------ |\n| scale | number | 1 |\n","_attachments":{},"license":"MIT"}