收藏
评论

小程序插件-生成二维码海报

通过简单的参数传入就可以生成分享海报,图片会根据设定的宽度和高度进行裁剪(不会压缩图片)

wxa-plugin-canvas

小程序插件-生成二维码海报

插件效果

<img width="300" src="https://github.com/jasondu/wxa-plugin-canvas/blob/master/demo.gif"></img>

  • 通过简单的参数传入就可以生成分享海报,图片会根据设定的宽度和高度进行裁剪(不会压缩图片)

如何使用

  1. 申请插件 在小程序管理后台-设置-第三方服务-添加插件,插件APPID:wx637a3fa923864f90,添加完请联系(微信:weizaidu)审核通过
  2. 使用插件 在app.json中加上以下代码
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wx637a3fa923864f90"
    }
  }

在需要使用插件的页面中的json文件添加以下代码

  "usingComponents": {
    "img-canvas": "plugin://myPlugin/canvas"
  }

在需要使用地方添加

<img-canvas images="{{images}}" width="{{width}}" height="{{height}}" background-color="{{backgroundColor}}" debug="{{debug}}">
    <button>生成海报</button> // 这个为自己自定义的按钮
</img-canvas>

插件参数解释

        images: { // 需要添加到海报里的图片信息
            type: Array,
            value: [{
                url: '',  // 图片地址
                width: 0, // 图片要展示的宽度
                height: 0,// 图片要展示的高度
                x: 0,     // 图片要展示在海报的x
                y: 0,     // 图片要展示在海报的y
            }],
        },
        width: { // 海报的宽度
            type: Number,
            value: 750,
        },
        height: { // 海报的高度
            type: Number,
            value: 750,
        },
        backgroundColor: { // 海报的背景色
            type: String,
            value: '#ffffff',
        },
        debug: { // 如果为true会展示canvas,为false则会隐藏
            type: Boolean,
            value: false,
        },

插件还在审核中

最后一次编辑于  2018-08-26
收藏

3 个评论

  • Efforts
    Efforts
    2019-01-07

    图片只能放配置的服务器上,本地的可以吗

    2019-01-07
    赞同
    回复
  • TNT
    TNT
    2018-07-10

    文字呢??

    2018-07-10
    赞同
    回复 2
    • 阿伟
      阿伟
      2018-07-10

      文字也可以的,看readme说明

      2018-07-10
      回复
    • 【Kń ǐghτ...°
      【Kń ǐghτ...°
      2020-09-15回复阿伟
      wx637a3fa923864f90这个id搜索不到?
      2020-09-15
      回复
  • 社区团购系统_商用369天_狮子鱼
    社区团购系统_商用369天_狮子鱼
    2018-03-24

    2018-03-24
    赞同
    回复
登录 后发表内容