WeChat 애플릿의 Canvas API를 사용하여 포스터 생성 구성 요소 패키지를 합성합니다.

각 미니 프로그램이 구성되면 일반적으로 국화 코드가 포함된 포스터를 생성하고 공유하여 더 많은 트래픽을 유도하는 방식으로 선택됩니다. 또 다른 구현 방법을 소개하겠습니다

원리: 주로 WeChat 애플릿의 강력한 Canvas API를 사용하여 생성한 후 wx.canvasToTempFilePath()를 사용하여 이미지 주소를 내보낼 수 있으므로 이미지 주소를 미리 볼 수 있습니다. 휴대폰 앨범

1.

을 사용하여 프로젝트 폴더 열기

   1、 git  clone  https://github.com/WGinit/mini-poster.git

2. 사용할 페이지의 Json 파일에 컴포넌트 등록

{ “usingComponents“:

  { “share-image“: “/components/share_image/share_image“ }

}

3. 페이지에서 컴포넌트 사용

  <share–image

       drawDataList=“{{dataList}}“>

  </share–image>

2 . 매개변수 구성

dataList: {
    canvasData:{
      type: 'image',
      url: '',
      top: 0,
      left: 0,
      width: 750,
      height: 1334,
      comment: '背景图',
      btnText: '保存至相册'
    },
    content: [{
      type: 'image',
      url: '',
      top: 136,
      left: 100,
      shape: 'square',
      width: 290,
      height: 186,
      comment: '头像'
    }, {
      type: 'text',
      content: '白山羊',
      top: 336,
      left: 100,
      fontSize: 40,
      lineHeight: 40,
      color: '#f00',
      textAlign: 'left',
      weight: 'bold',
      maxWidth: 287
    }]
  }

3. 매개변수 설명

canvasData------------캔버스 관련 매개변수 구성

ㅋㅋㅋ 네트워크 이미지 주소 )

parameter

type

기본값

필수

description

top

Number

0

No

시각 영역 Y축의 이미지 왼쪽 상단 위치, 단위 px

left

Number

0

No

시각 영역 X축의 이미지 왼쪽 상단 위치, 단위 px

width

Number

750

No

캔버스의 너비, 단위 px

height

Number

1334

No

캔버스의 높이(px

comment

String

'배경 이미지'

No

사진 설명

btnText

String

'앨범에 저장'

예

버튼 텍스트 생성

content -------콘텐츠 매개변수 그리기

No 600 No텍스트 최대 너비 제한, 단위 pxJS와 캔버스를 합성하여 위챗 공개 계정 포스터 만들기멀티 -WeChat 애플릿의 파일 다운로드 캡슐화

parameters	type	기본값	required	description
type	String	''	네	그림 종류, 선택 이미지 및 텍스트
shape	String	'사각형'	No	그림 모양, 정사각형 정사각형, 원형 ​​원
url	String	' '	-	사진의 네트워크 주소, 유형은 이미지 필수
content	String	''	-	text 콘텐츠, 유형은 텍스트 필수
top	Number	0	No	대상 캔버스의 Y축을 기준으로 이미지의 왼쪽 상단 모서리 위치, 단위 px
left	NUmber	0	No	이미지의 왼쪽 상단 모서리 위치 대상 캔버스의 X축 이미지, 단위는 px
width	Number	100	No	그리는 그림의 너비, 단위는 px
height	Number	100	No	그린 그림의 높이(px)
comment	String	''	No	그림 그리기 지침
fontSize	번호	32	No	텍스트 글꼴 크기, 단위 px
lineHeight	Number	32	No	텍스트 줄 높이, 단위 px
color	String	'#FFFFFF '	안돼	텍스트 글꼴 색상
textAlign	String	'center'
	위 단위는 디자인 기준입니다. 초안(750*1334) 실제 상황에서는 디자인 초안의 크기에 따라 매개변수를 직접 구성할 수 있습니다.	관련 기사:

위 내용은 WeChat 애플릿의 Canvas API를 사용하여 포스터 생성 구성 요소 패키지를 합성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!