Lassen Sie uns darüber sprechen, wie Sie ein kleines Programm zum Erstellen von Postern verwenden (Plug-in empfohlen).

青灯夜游
Freigeben: 2021-09-13 18:36:17
nach vorne
3102 Leute haben es durchsucht

怎么利用小程序生成海报?下面本篇文章就来给大家推荐一个海报生成插件--painter,看看利用它怎么生成海报,希望对大家有所帮助!

Lassen Sie uns darüber sprechen, wie Sie ein kleines Programm zum Erstellen von Postern verwenden (Plug-in empfohlen).

小程序原生代码生成海报

第一步:

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

 https://github.com/Kujiale-Mobile/Painter
Nach dem Login kopieren

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

第二步:

使用页面的json文件中引入

{
  "usingComponents": {
    "painter":"/components/painter/painter"
  }
}
Nach dem Login kopieren

第三步:

使用页面的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 事件来获得成功后的图片或失败的原因
Nach dem Login kopieren

第四步:

使用页面的js

生成海报的方法(){
this.setData({
        template: {
          width: "750rpx",
          height: "1500rpx",
          views: [
            {
              type: &#39;image&#39;,
              url: 图片路路径,
              css: {
                top: &#39;10rpx&#39;,
                left: &#39;10rpx&#39;,
                right: &#39;10rpx&#39;,
                width: &#39;730rpx&#39;,
                height: &#39;1500rpx&#39;
              }
            }
          ]
        }
     })
}

  海报生成完毕自动调用
  
  firstImg(e) {
    console.log(e.detail.path);
    this.setData({
      posterImg: e.detail.path
    })
  },
Nach dem Login kopieren

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

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

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

作者:黄勇超

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

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie ein kleines Programm zum Erstellen von Postern verwenden (Plug-in empfohlen).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:掘金--黄勇超
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage