작은 프로그램을 사용하여 포스터를 생성하는 방법에 대해 이야기해 보겠습니다. (플러그인 권장)-미니 프로그램 개발-php.cn

작은 프로그램을 사용하여 포스터를 생성하는 방법에 대해 이야기해 보겠습니다. (플러그인 권장)

青灯夜游

풀어 주다： 2021-09-13 18:36:17

앞으로

3075명이 탐색했습니다.

미니 프로그램을 사용하여 포스터를 만드는 방법은 무엇인가요? 이번 글에서는 포스터 생성 플러그인인 페인터를 추천하고, 이를 사용하여 포스터를 생성하는 방법을 알아보겠습니다. 여러분에게 도움이 되기를 바랍니다.

작은 프로그램을 사용하여 포스터를 생성하는 방법에 대해 이야기해 보겠습니다. (플러그인 권장)

Mini 프로그램 네이티브 코드 생성 포스터

1단계:

패키지를 다운로드하고 Painter 패키지를 구성 요소 디렉터리에 넣습니다

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

로그인 후 복사

[관련 학습 권장 사항: Mini 프로그램 개발 튜토리얼 】

2단계:

페이지의 json 파일을 사용하여

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

로그인 후 복사

가져오기 3단계:

페이지의 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 事件来获得成功后的图片或失败的原因

로그인 후 복사

4단계:

페이지의 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
    })
  },

로그인 후 복사