小程序绘制海报并分享

迷途橘

2023 年 03 月 15 日

90 次浏览

1 条评论

2425字数

vue web 小程序

### 引入插件

[个人备份](https://github.com/2691432189/QS-SharePoster)

```js
import { getSharePoster } from 'QS-SharePoster.js'
import { reactive, getCurrentInstance } from "vue"
```

### 定义画布

```html
<view>
	<view class="hideCanvasView">
		<canvas 
			class="hide-canvas" 
			canvas-id="poster-canvas-id" 
			:style="{ width: `${state.poster.width || 10}px`, height: `${state.poster.height || 10}px` }" 
		/>
	</view>
</view>
```

### 样式

```css
.hide-canvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}
```

### 定义所需状态

```js
const state = reactive({
	poster: {
		height: '',
		width: '',
		finalPath: ''
	}
})
```

### 绘制海报

```js
const shareFc = async () => {
  try {
    const {  poster: { tempFilePath } } = await getSharePoster({
      //若在组件中使用 必传
      _this: getCurrentInstance(), 
      type: 'otherShareType',
      //背景图片路径
      backgroundImage: 'https://jhhn-files.oss-cn-shenzhen.aliyuncs.com/mini-program/ranking-background.JPG', 
      //访问接口获取背景图携带自定义数据
      formData: {},
      //canvasId
      posterCanvasId: 'poster-canvas-id', 
      //元素延时系数
      delayTimeScale: 20, 
      //额外延时时长, 生成白图时调大此参数
      drawDelayTime: 100, 
      drawArray: ({ bgObj, type, bgScale }) => {
        //可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
        return new Promise((rs, rj) => {
          rs([
             {
                type: 'image',
                id: 'productImage',
                url: '图片路径',
                dx: bgObj.width * 0.06,
                dy: bgObj.height * 0.04,
                serialNum: 0,
                infoCallBack(imageInfo) {
                  return {
                    dWidth: 350,
                    dHeight: 350
                  }
                }
             },
             {
               type: 'text',
               text: '渲染文字',
               size: 120,
               color: '#ffffff',
               textAlign: 'left',
               textBaseline: 'middle',
               dx: bgObj.width * 0.28,
               dy: bgObj.height * 0.085,
               serialNum: 0,
               //自定义标识
               id: 'tag1'
             }
           ])
         })
       },
       setCanvasWH: ({ bgObj, type, bgScale }) => {
         // 为动态设置画布宽高的方法，
         state.poster = bgObj
       }
     })
     state.poster.finalPath = tempFilePath
     shareImage()
   } catch (e) {
     console.log(e)
   }
}
```

### 分享调用海报

```js
const shareImage = () => {
	wx.showShareImageMenu({
		path: state.poster.finalPath
	})
}
```

最后修改：2023 年 09 月 21 日