使用官方组件wxml-to-canvas的背景 由于现在很多小程序业务都需要生成海报 保存成图片便于用户分享,以往生成canvas的海报需要用户手写canvas对应的JS比较麻烦,所以官方提供了一个组件wxml-to-canvas,的确方便了不少,但也有一些坑和注意事项。 基础注意事项 默认尺寸为400*300,需要在引入的标签里自定义修改。 <wxml-to...
console.log('options', options);this.name = 'wxml生成canvas(liangtao)'this.pic = 'https://pic1.zhimg.com/80/v2-58fe538a59f870407b1435bfd45893ed_720w.jpeg'this.chapter = ['第一段对话','第二段对话','第三段对话','第四段对话','第五段对话','第六段对话','第七段对话','第八段...
wxml-to-canvas使用笔记。小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图,生成小程序分享海报等场景。 wxml-to-canvas使用笔记。小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图,生成小程序分享海报等场景。 在已经创建好的项目中进行安装 wxml-to-canvas 1.详情-本地设置-...
wxml-to-canvas的一些使用心得 wxml-to-canvas的⼀些使⽤⼼得 ⼀、wxml-to-canvas的引⼊ 1. 在当前⽬录的控制台上输⼊如下代码：npm install --save wxml-to-canvas 2. 点击微信⼩程序左上⾓的《⼯具》->构建npm 注意：若项⽬之前没有使⽤过npm管理依赖是⽆法构建npm的，需要在项...
f1. renderToCanvas({wxml, style}): Promise f2. canvasToTempFilePath({fileType, quality}): Promise 支持的 css 属性 布局相关 文字 变形 wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景。代码片段
<XWxmlToCanvas v-if="wxmlIsReady"ref="xWxmlToCanvas":hide="true":width="500":height="style.container.height":xStyle="style":xWxml="wxml"/> 你们看到的图片似乎带了box-shadow,wxml-to-canvas不支持css的box-shadow,我只能自己用view一圈一圈画了,边缘不够模糊,还要继续改进下。
在wxml中使用wxml-to-canvas组件 <!-- 图片展示 --><viewclass="paper_content"wx:if="{{tempFilePath}}"><imagesrc="{{tempFilePath}}"mode="heightFix"style="height:66%;position: relative;z-index: 999; margin-top:20%"id="canvas_image"catchtap="hidePaper"/></view><!-- canvas节点 --...
f1. renderToCanvas({wxml, style}): Promise渲染到 canvas,传入 wxml 模板 和 style 对象,返回的容器对象包含布局和样式信息。 f2. canvasToTempFilePath({fileType, quality}): Promise提取画布中容器所在区域内容生成相同大小的图片,返回临时文件地址。
npm install --save wxml-to-canvas 一定要构建npm 2.引入组件 首先在你要用的页面json里引入 "usingComponents": { "wxml-to-canvas": "wxml-to-canvas" } 这里要注意的是,在引入的时候可能会报错,显示路径错误,原因是在miniprogram_npm文件夹下没找到相应的文件,但是在node包里是有的,然后我把官方demo里mi...
因为插件里的canvas有一个自己的宽高,所以我们需要把海报的宽高计算好传入 <wxml-to-canvasclass="widget"width="{{315*unit}}"height="{{440*unit}}"></wxml-to-canvas> 6.在js页面引入 const{wxml,style}=require('./share.js')onLoad(){this.widget=this.selectComponent('.widget')setTimeout(()=...