canvasdrawer 微信原生小程序生成海报图片

在小程序中生成海报是一种非常有效的推广方式

用户可以使用小程序的过程中生成小程序海报并分享给他人

通过海报的形式,用户可以直观地了解产品或服务的特点和优势

常见绘制海报方式

目前,小程序海报有两种常见的实现方式:

· canvas 绘制海报

· 服务端绘制海报

这两种方式各有千秋

canvas 绘制海报
使用 canvas 绘制海报主要有以下几个步骤

1、创建 canvasContext

2、获取网络图片的本地路径

3、绘制图片、文字等到 canvas

4、调用 wx.canvasToTempFilePath 导出图片

尽管 canvas 绘制功能强大,但实际使用中,这些操作看似简单,但调试起来却比较麻烦

而且面对一些复杂的排版时,使用 canvas 绘制相较于使用 CSS 绘制来说困难许多,如圆角、百分比、自定义字体等等。

除此之外,canvas 的宽高有最大限制,超出限制则会绘制空白

服务端绘制

小程序也可以通过调用服务端接口,将需要生成海报的数据传递给服务端,

由服务端使用 Canvas API 等第三方库来生成图片。

然而,这种绘制方式需要走网络请求,如果量大会给服务器带来一定的成本压力。

此外,对于复杂排版的实现,使用 Canvas 绘制也有一定的难度。

尽管小程序海报虽然好用,但是当遇到要求比较高的设计稿需要还原海报时,对小程序开发者来说是一个十分让人头疼的问题

考虑到海报在小程序中使用的广泛性,我们把canvas绘制海报封装成组件使用,通过对象配置的方式生成海报图,更加简洁易用~
在这里插入图片描述

引入组件

"usingComponents": {"canvasdrawer": "/components/canvasdrawer/canvasdrawer"}

wxml

<image src="{{shareImage}}" class="share-image"></image>
<canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>

js

Page({data: {shareImage:'',paintingIndex:0,painting:{width: 375,height: 500,clear: true,views: [{type: 'image',url: 'https://defaultbg.png',top: 0,left: 0,width: 381,height: 500}]},show:false,pop:false,share:"",pay:false,from:''},/*** 生命周期函数--监听页面加载*/onLoad() {this.getShare();},async getShare(){let _this = this;await get_share().then(res=>{const painting =  {width: 375,height: 500,clear: true,views: [{type: 'image',url: 'https://defaultbg.png',top: 0,left: 0,width: 381,height: 500},{type: 'image',url: res.data.personnel_share_img || 'https://default.png',top: 190,left: 48,textAlign: "center",borderRadius:8,width: 290,height: 130},{type: "text",content: res.data.activity_name || '',fontSize: 18,width: 280,color: "#000000",textAlign: "left",top: 336,left: 46,zIndex:200},{type: 'image',url: res.data.avatar_url || 'https://default.png',top: 405,left: 42,borderRadius:7,width: 70,height: 60,zIndex:200},{type: "text",content: res.data.guardian_name || '默认名称',fontSize: 16,color: "#000000",textAlign: "left",top: 415,left: 120,zIndex:200},{type: "text",content: "分享给你",width: 96,fontSize: 14,color: "#555555",textAlign: "left",top: 440,left: 120,zIndex:200},{type: 'image',url: res.data.qr_img_url || 'https://default.png',top: 390,left: 240,width: 100,height: 90,zIndex:200},]};_this.setData({share:res.data,painting})})await _this.setData({mode: 'normal',painting:this.data.painting,paintingIndex: 1,show:true})},eventGetImage(event){let _this = this;const { tempFilePath } = event.detailthis.setData({shareImage: tempFilePath})}
})

获取组件

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/617825.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年1月12日:清爽无糖rio留下唇齿之间的香甜

友利奈绪的时间管理 2024年1月12日08:02:28进行java程序设计的上课准备 2024年1月12日08:02:44知道java的题目有18道 2024年1月12日08:43:07随机数去重比较 2024年1月12日08:54:03C语言题目最小公倍数 2024年1月12日08:58:37C语言题目二维数组变一维数组 2024年1月12日10…

Java学习,一文掌握Java之SpringBoot框架学习文集(8)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

Nginx配置负载均衡实例

Nginx配置反向代理实例二 提醒一下&#xff1a;下面实例讲解是在Mac系统演示的&#xff1b; 负载均衡实例实现的效果 浏览器地址栏输入地址http://192.168.0.101/test/a.html&#xff0c;刷新页面进行多次请求&#xff0c;负载均衡效果&#xff0c;平均分配到8080端口服务和8…

SSM-SpringMVC+Spring+Mybatis

创建项目 创建好 项目后, 项目目录分析 数据库设计 我们采用员工表 Employee 与 部门表 Department 部门表 表设计--- 员工表 --表设计 因为有文件上传操作,因此 建立 info表 (其中 员工只能隶属一个部门,因此 两张表之间 有外键关系) java 代码 设计 数据库建立完毕后,需要…

通过离散点拟合曲线

文章目录 使用离散点拟合曲线参考代码路径:作者源码:测试代码效果图:k3k4k5 使用离散点拟合曲线 参考代码路径: https://www.bragitoff.com/2015/09/c-program-for-polynomial-fit-least-squares/ https://gist.github.com/Thileban/272a67f2affdc14a5f69ad3220e5c24b https:/…

网络安全产品之认识防火墙

防火墙是一种网络安全产品&#xff0c;它设置在不同网络&#xff08;如可信任的企业内部网和不可信的公共网&#xff09;或网络安全域之间&#xff0c;通过监测、限制、更改跨越防火墙的数据流&#xff0c;尽可能地对外部屏蔽网络内部的信息、结构和运行状况&#xff0c;以此来…

docker安装nacos+mysql+配置网络

一、配置网络 为什么要配置网络&#xff1f;因为 Nacos 内要连接MySQL数据库的&#xff0c;我的 MySQL 数据库也是用 Docker启动的&#xff0c;所以2个容器间要通信是需要配置他们使用相同的网络。这个操作要在启动Nacos容器之前。 注意&#xff1a;这里配置的网络只在镜像内部…

Linux消息队列

常用函数 //创建/获取消息队列 int msgget (key_t key, int msgflg); /* key : 为键值,ftok(); msgflg:IPC_CREAT - 创建&#xff0c;不存在即创建&#xff0c;已存在即获取&#xff0c;除非… IPC_EXCL - 排斥&#xff0c;已存在即失败。 */// 向消息队列发送消息 int msgs…

【python】OpenCV—Histogram(9)

学习参考来自 Python下opencv使用笔记&#xff08;九&#xff09;&#xff08;图像直方图&#xff09; 更多学习笔记可以参考 【python】OpenCV—RGB&#xff08;1&#xff09;【python】OpenCV—Rectangle, Circle, Selective Search&#xff08;1.2&#xff09;【python】…

Python学习从0到1 day3 python变量和debug

没关系&#xff0c;这破败的生活压不住我 ——24.1.13 一、变量的定义 1.什么是量&#xff1f; 量是程序运行中的最小单元 2.什么是变量呢&#xff1f; ①变量是存储数据的容器 ②变量存储的数据时临时的&#xff0c;变量只有在程序运行过程中是有效的&#xff0c;当程序执行结…

在vue中实现树形结构的表格,以及对数据结构的处理

需求&#xff1a;有一些告警数据&#xff0c;如果他们的计划编码相同则实现折叠效果&#xff0c;单击某行数据可以进行关闭&#xff0c;状态发生改变&#xff0c;关闭以后按钮禁用。 实现效果&#xff1a;目前所有告警消息都被关闭&#xff0c;如果未被关闭则可以进行关闭 实现…

【Python】编程练习的解密与实战(四)

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《Python | 编程解码》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 目录 &#x1fa90;1. 初识Python &a…

集简云动作管理平台上线:创建强大且可分享的AI助手(GPTs)

OpenAI的GPT Store于昨天上线&#xff0c;用户可以找到好用的GPTs&#xff0c;也可以将自己的GPTs分享到GPT Store中。未来&#xff08;预计今年1季度&#xff09;甚至可以从GPTs Store中获取利润分成。 要创建强大的GPTs离不开调用外部的软件工具&#xff0c;比如查询CRM/ERP软…

Stable Diffusion初体验

体验了下 Stable Diffusion 2.0 的图片生成&#xff0c;效果还是挺惊艳的&#xff0c;没有细调prompt输入&#xff0c;直接输入了下面的内容&#xff1a; generate a Elimination Game image of burnning tree, Cyberpunk style 然后点击生成&#xff0c;经过了10多秒的等待就输…

TensorRT模型优化模型部署(七)--Quantization量化(PTQ and QAT)(二)

系列文章目录 第一章 TensorRT优化部署&#xff08;一&#xff09;–TensorRT和ONNX基础 第二章 TensorRT优化部署&#xff08;二&#xff09;–剖析ONNX架构 第三章 TensorRT优化部署&#xff08;三&#xff09;–ONNX注册算子 第四章 TensorRT模型优化部署&#xff08;四&am…

Redis info命令生产监控和config配置命令

1.info命令 info命令介绍&#xff1a;服务器的各种信息和统计数值 # Server&#xff1a;有关Redis服务器的常规信息 redis_version:6.2.14 # Redis版本 redis_mode:standalone # 运行模式&#xff1a;单机或者集群 multiplexing_api:epoll # Redis所使用的事件处理机制 run_i…

国产麒麟系统开机没有网络需要点一下这个设置

问题描述&#xff1a; 一台国产电脑网线连接正常&#xff0c;打开网页后显示无法访问&#xff0c;那么是什么原因无法上网呢&#xff1f;下面就告诉你一个小方法去解决一下这个问题&#xff1b; 检查故障&#xff1a; 检测交换机、网线、水晶头全都正常&#xff0c;同房间摆放的…

Hive基础知识(十):Hive导入数据的五种方式

1. 向表中装载数据&#xff08;Load&#xff09; 1&#xff09;语法 hive> load data [local] inpath 数据的 path[overwrite] into table student [partition (partcol1val1,…)]; &#xff08;1&#xff09;load data:表示加载数据 &#xff08;2&#xff09;local:表示…

【从0上手cornerstone3D】如何渲染一个基础的Dicom文件(含演示)

一、Cornerstone3D 是什么&#xff1f; Cornerstone3D官网&#xff1a;https://www.cornerstonejs.org/ 在线查看显示效果&#xff08;加载需时间&#xff0c;可先点击运行&#xff09;&#xff0c;欢迎fork 二、代码示例 了解了Cornerstone是什么&#xff0c;有什么作用后&…

QT 检测是否有网络

一、模拟一个请求去判断是否有网&#xff0c;此处需要加个事件循环&#xff0c;实现阻塞等待网络请求的完成。 这是因为Qt的网络模块是基于事件驱动的&#xff0c;网络请求的完成是通过信号和槽机制来通知的。在没有事件循环的情况下&#xff0c;主线程会立即执行到return语句&…