利用微信小程序中Canvas API来合成海报生成组件封装

php是最好的语言

发布时间：2018-08-06 15:48:24

5101人浏览过

来源于php中文网

原创

每个小程序成型后，一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。下面来介绍下其他的一种实现方式吧

原理：主要利用微信小程序强大的Canvas API来合成，生成后可用wx.canvasToTempFilePath()导出图片地址，从而可实现预览及保存至手机相册

一、如何使用

打开项目文件夹

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

2、在待使用页面Json文件中注册该组件

帮衣帮-AI服装设计

AI服装设计神器，AI生成印花、虚拟试衣、面料替换

下载

{ “usingComponents“:

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

}

3、在页面中使用该组件

二、参数配置

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
    }]
  }

三、参数说明

canvasData------------canvas相关参数配置

参数	类型	默认值	必填	说明
type	String	image	是	文件类型，这里为背景图，默认image
url	String	''	是	网络图片地址
top	Number	0	否	图像的左上角在可视区域上 Y 轴的位置, 单位px
left	Number	0	否	图像的左上角在可视区域上 X 轴的位置, 单位px
width	Number	750	否	画布的宽度, 单位px
height	Number	1334	否	画布的高度, 单位px
comment	String	'背景图'	否	图片描述
btnText	String	'保存至相册'	是	生成按钮文字

content -------绘制内容参数

参数	类型	默认值	必填	说明
type	String	''	是	绘制的类型，可选image和text
shape	String	'square'	否	绘制图片的形状, square 方形， circle 圆形
url	String	''	-	图片的网络地址， type为image必填
content	String	''	-	文本内容， type为text必填
top	Number	0	否	图像的左上角在目标画布上 Y 轴的位置, 单位px
left	NUmber	0	否	图像的左上角在目标画布上 X 轴的位置, 单位px
width	Number	100	否	绘制图片的宽度,单位px
height	Number	100	否	绘制图片的高度, 单位px
comment	String	''	否	绘制图片的说明
fontSize	Number	32	否	文本字体大小,单位px
lineHeight	Number	32	否	文本行高, 单位px
color	String	'#FFFFFF '	否	文本字体颜色
textAlign	String	'center'	否	文本水平对齐方式, 可选left, center, right
weight	String	'normal'	否	文本字体粗细
maxWidth	Number	600	否	文本限制的最大宽度，单位px

四、备注

上述单位都是参照设计稿（750 * 1334）而来，实际情况可直接按设计稿上尺寸配置参数.

js与canvas合成图片做出微信公众号海报功能

微信小程序的多文件下载封装使用

跨端开发:一套代码生成6端小程序!

如何避免原生小程序的常见漏洞?

微信小程序底层原理_安卓端的渲染机制

探秘热门小程序开发技术

如何快速升级小程序基础库版本‌

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！

下载

相关标签:

javascript

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：微信小程序更新webview页面的三种方法下一篇：微信小程序开发--如何制作表白图片？

作者最新文章

各大公司Java面试题归纳整理（全）

2018-08-10 15:43

实战演练--js实现在网页间传递数据

2018-08-10 16:16

js 闭包与原型的应用代码详解

2018-08-10 16:35

什么是模块化编程？js 模块化编程的总结

2018-08-10 16:51

js可视区域加载：getBoundingClientRect方法

2018-08-10 16:56

Paypal 支付功能的 C# .NET / JS 实现

2018-08-10 17:11

最新整理的JavaScript常见事件类型

2018-08-10 17:21

js的三大舍入函数（round()， ceil() ，floor()）的对比

2018-08-10 17:44

详解js中call()、apply()、bind()的用法

2018-08-10 17:50

微信开发教程：自动回复消息和客服消息，文本带链接跳转

2018-08-10 17:53

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

全国统一发票查询平台入口合集

本专题整合了全国统一发票查询入口地址合集，阅读专题下面的文章了解更多详细入口。

2026.02.03

短剧入口地址汇总

本专题整合了短剧app推荐平台，阅读专题下面的文章了解更多详细入口。

2026.02.03

植物大战僵尸版本入口地址汇总

本专题整合了植物大战僵尸版本入口地址汇总，前往文章中寻找想要的答案。

2026.02.03

c语言中/相关合集

本专题整合了c语言中/的用法、含义解释。阅读专题下面的文章了解更多详细内容。

2026.02.03

漫蛙漫画网页版入口与正版在线阅读漫蛙MANWA官网访问专题

本专题围绕漫蛙漫画（Manwa / Manwa2）官网网页版入口进行整理，涵盖漫蛙漫画官方主页访问方式、网页版在线阅读入口、台版正版漫画浏览说明及基础使用指引，帮助用户快速进入漫蛙漫画官网，稳定在线阅读正版漫画内容，避免误入非官方页面。

2026.02.03

Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口

本专题汇总了俄罗斯知名搜索引擎 Yandex 的官网入口、免登录访问地址、中文登录方法与网页版使用指南，帮助用户稳定访问 Yandex 官网，并提供一站式入口汇总。无论是登录入口还是在线搜索，用户都能快速获取最新稳定的访问链接与使用指南。

114

2026.02.03

Java 设计模式与重构实践

本专题专注讲解 Java 中常用的设计模式，包括单例模式、工厂模式、观察者模式、策略模式等，并结合代码重构实践，帮助学习者掌握如何运用设计模式优化代码结构，提高代码的可读性、可维护性和扩展性。通过具体示例，展示设计模式如何解决实际开发中的复杂问题。

2026.02.03

C# 并发与异步编程

本专题系统讲解 C# 异步编程与并发控制，重点介绍 async 和 await 关键字、Task 类、线程池管理、并发数据结构、死锁与线程安全问题。通过多个实战项目，帮助学习者掌握如何在 C# 中编写高效的异步代码，提升应用的并发性能与响应速度。

2026.02.03

Python 强化学习与深度Q网络（DQN）

本专题深入讲解 Python 在强化学习（Reinforcement Learning）中的应用，重点介绍深度Q网络（DQN）及其实现方法，涵盖 Q-learning 算法、深度学习与神经网络的结合、环境模拟与奖励机制设计、探索与利用的平衡等。通过构建一个简单的游戏AI，帮助学习者掌握如何使用 Python 训练智能体在动态环境中作出决策。

2026.02.03

热门下载

网站特效

网站源码

网站素材

前端模板