评论

使用三方插件快速生成海报图并保存到相册

使用三方插件快速生成海报图并保存到相册

效果图镇楼:

本文将讲述使用wx-canvas-2d插件来实现生成海报图并保存到相册的功能,wx-canvas-2d 使用canvas 2d接口。
首先需要在页面中准备一个canvas容器,代码如下:

<canvas
    type="2d"
    id="poster-canvas"
    class="poster-canvas"
    style="width: 300rpx; height: 900rpx;"
    disable-scroll="{{ true }}"
/>

style属性中的样式可以在 .wxss 文件中设置。

.js 文件中引入 wx-canvas-2d,并实例化:

import {
    WxCanvas2d,
    Text // 绘制文本需要引入这个
} from 'wx-canvas-2d'

// 实例化对象
const canvas = new WxCanvas2d()

在页面加载完毕,页面上存在 canvas 元素之后执行 create 方法初始化画布。

// 创建画布
canvas.create({
    query: '.poster-canvas', // 必传,canvas元素的查询条件
    rootWidth: 750, // 参考设备宽度 (即开发时UI设计稿的宽度,默认375,可改为750)
    bgColor: '#fff', // 背景色,默认透明
    component: this, // 自定义组件内需要传 this
    radius: 16 // 海报图圆角,如果不需要可不填
})

现在画布已经准备好了,让我们来尝试一下“Hello World”

canvas.draw({
    series: [
        {
            type: Text,
            text: 'Hello World',
            fontSize: 30
        }
    ]
})

此时可以看到画布上有了效果:

上面这只是最简单的一个演示,更复杂的绘制只需要在 series 数组中添加更多的配置项。

插件具体支持的配置项有哪些可以查看文档:https://kiccer.github.io/wx-canvas-2d/

最后一次编辑于  2021-08-20  
点赞 0
收藏
评论

4 个评论

  • 木然
    木然
    2022-08-29

    引入的时候提示这个 怎么解决大佬

    2022-08-29
    赞同
    回复
  • DX
    DX
    2022-03-22

    保存功能能不能详细一点


    2022-03-22
    赞同
    回复 1
  • 飞飞吕
    飞飞吕
    2022-03-04

    能设置透明背景吗

    2022-03-04
    赞同
    回复 1
    • Lynch Bel
      Lynch Bel
      2022-03-29
      可以的,使用 create 方法创建画布的时候 bgColor 参数不传就是默认透明背景。
      2022-03-29
      回复
  • 周宽
    周宽
    2021-12-23

    小程序后台运行后再切回来 绘制好的画布变成空白了

    2021-12-23
    赞同
    回复 2
    • 周宽
      周宽
      2021-12-23
      解决了 创建代码写错位置了~
      2021-12-23
      回复
    • Lynch Bel
      Lynch Bel
      2022-01-14回复周宽
      👍
      2022-01-14
      回复
登录 后发表内容