wxml2Canvas小程序生成图片

wesleyXu
359 阅读2分钟

wxml2Canvas小程序生成图片，实现了大部分功能。 但是看了看已经有几年不更新了，有一些bug，正好我用到了GitHup上是有人提这个问题的但是作者没改，那么索性改！

lineClamp ==> 文本超出一行那么省略... 但是wxml生成在标签加不生效
看看源码找到了问题，那么就改了吧
改后再 wxml 标签上加上 data-line-clamp="2"
就是2行超过省略 ...
如下：
<view class="share__canvas share__canvas1">
    <view class="share__canvas1-text draw_canvas" 
        data-type="text" data-text="这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字" data-line-clamp="2">
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    </view>
</view>

效果图我就不放了

安装：

 npm install wxmlcanvas_v2

使用： 这里注意：使用的使用的canvas节点不能是组件一定要在界面了，可以用小程序模版的方式引入

<view class="share__canvas share__canvas1">
    <view class="share__canvas1-text draw_canvas" 
        data-type="text" data-text="这是一段无边距文字">
        这是一段无边距文字
    </view>
</view>
<canvas canvas-id="canvas1" class="share__canvas"></canvas>

import WxmlCanvas from 'wxmlcanvas_v2'; 
this.drawImage1 = new WxmlCanvas({...})

内部有好多样式没有实现，基本样式是可以的没问题，有问题欢迎留言，有空会更改。 小程序使用建议使用 npm 下载后在node_modules中找到 wxmlcanvas_v2 中的 wxmlcanvas_v2/src 中的文件取出来（index.js 和util.js）使用。

文档看这里（复制打开）：www.npmjs.com/package/wxm…

https://www.npmjs.com/package/wxmlcanvas_v2

gitHub地址：github.com/wesleyXuL/w…

https://github.com/wesleyXuL/wxmlcanvas_v2
avatar
文章
阅读
粉丝