• 技术文章 >微信小程序 >小程序开发

    聊聊怎么利用小程序生成海报(插件推荐)

    青灯夜游青灯夜游2021-09-13 18:36:17转载141
    怎么利用小程序生成海报?下面本篇文章就来给大家推荐一个海报生成插件--painter,看看利用它怎么生成海报,希望对大家有所帮助!

    小程序原生代码生成海报

    第一步:

    下载包,并将painter包放在components目录下

     https://github.com/Kujiale-Mobile/Painter

    【相关学习推荐:小程序开发教程

    第二步:

    使用页面的json文件中引入

    {
      "usingComponents": {
        "painter":"/components/painter/painter"
      }
    }

    第三步:

    使用页面的wxml

    接收海报的图片容器
    <image mode="widthFix" src="{{ posterImg }}" id="goods_qr-code" alt />
    
    <painter wx-if="{{showPainter}}" palette="{{data}}" bind:imgOK="firstImg" />
      
    palette        字段作为画图数据的数据源, 图案数据以 json 形式存在
    widthPixels    强制指定生成的图片的像素宽度
    
    绘图完成后,可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片或失败的原因

    第四步:

    使用页面的js

    生成海报的方法(){
    this.setData({
            template: {
              width: "750rpx",
              height: "1500rpx",
              views: [
                {
                  type: 'image',
                  url: 图片路路径,
                  css: {
                    top: '10rpx',
                    left: '10rpx',
                    right: '10rpx',
                    width: '730rpx',
                    height: '1500rpx'
                  }
                }
              ]
            }
         })
    }
    
      海报生成完毕自动调用
      
      firstImg(e) {
        console.log(e.detail.path);
        this.setData({
          posterImg: e.detail.path
        })
      },

    插件介绍及官网:Painter生成海报

    https://codechina.csdn.net/mirrors/Kujiale-Mobile/Painter?utm_source=csdn_github_accelerator

    原文地址:https://juejin.cn/post/6995356720125968398

    作者:黄勇超

    更多编程相关知识,请访问:编程视频!!

    以上就是聊聊怎么利用小程序生成海报(插件推荐)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金--黄勇超,如有侵犯,请联系admin@php.cn删除
    专题推荐:小程序 海报
    上一篇:关于小程序的request封装(附详细流程) 下一篇:怎么使微信小程序支持async await?
    线上培训班

    相关文章推荐

    • uniapp适配到微信小程序需要注意些什么?• uniapp上如何实现小程序的微信登录功能(流程总结)• 深入讲解小程序中实现搜索功能的方法• uniapp怎么实现小程序页面的自由拖拽功能• 详细了解uniapp和小程序中的分包步骤

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网