微信小程序使用wxa-plugin-canvas分享海报和朋友圈

最新推荐文章于 2024-09-13 22:10:04 发布

浅箬

最新推荐文章于 2024-09-13 22:10:04 发布

阅读量1.4k

点赞数

分类专栏：微信小程序文章标签：小程序 canvas

本文链接：https://blog.csdn.net/qq_34458824/article/details/118296560

版权

本文介绍了一个用于微信小程序的海报生成组件wxa-plugin-canvas的使用方法及配置细节，并提供了生成海报的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在写海报的时候自己也封装过一个，这里再给大家推荐一个组件wxa-plugin-canvas。目前就使用感来说还是不错的。这里有一个开源的地址，大家可以把它下载下来放进自己的组件中

开源项目地址：https://github.com/jasondu/wxa-plugin-canvas

开源项目作者：jason

使用注意事项

图片的域名务必添加到downloadFile合法域名中（开发设置-服务器域名-downloadFile合法域名）
如果要使用异步生成海报的方法，务必组件要加上 id="poster"

使用方法

在需要的界面引入：

{
  "enablePullDownRefresh": true,
  "usingComponents": {
    "poster": "/components/wxa-plugin-canvas/poster/index",
  }
}

在wxml界面添加一个下载的按钮

      <poster id="poster" config="{
  {posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
         <view >下载海报</view>
      </poster>

在js中添加海报生成时的配置：posterConfig

var posterConfig = {
  width: 648,
  height: 886,
  backgroundColor: 'rgba(255,255,255,1)',
  borderRadius:0,
  debug: false,
  pixelRatio: 1,
  texts: [
      {
          x:136,
          y: 81,
          text: '友谊的小船急需你的助力',
          fontSize: 30,
          fontWeight: '400',
          color: '#333',
      }
  ],
  images: [
    {
      width: 80,
      height: 80,

最低0.47元/天解锁文章