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

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

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: '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

저자: Huang Yongchao

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 작은 프로그램을 사용하여 포스터를 생성하는 방법에 대해 이야기해 보겠습니다. (플러그인 권장)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!