微信小程序-绘制图片并分享下载(painter)

1、引入painter插件

painter官网地址

1.1 可通过官网的方法引入painter插件,

官方插件下载地址

1.2 可下载本文附带的插件包直接引入
1.2.1 复制下载下来的文件中的painter文件夹,将其放在components目录下

在这里插入图片描述

1.2.2 页面中引入并使用

.json

{"usingComponents": {"painter":"/components/painter/painter"},
}

.wxml

  <painter palette="{{posterData}}" bind:imgOK="onImageOK" />

.js

const poster = require("./posterData")data:{posterImageUrl: "", //海报图片posterData: {},}onLoad(options) {this.setData({posterData: poster.getPosterData('这个是一个问题','这个是一个回答')})}//监听海报是否生成成功onImageOK(e) {wx.hideLoading();this.setData({posterImageUrl: e.detail.path})wx.showShareImageMenu({path: this.data.posterImageUrl})},

posterData.js

这个文件放在上面几个文件的同级目录下

//图片路径一定要是绝对路径或者网络路径,相对路径是无法显示的
export function getPosterData(question = '', answer = '') {return {width: '686rpx',height: '686rpx',background: "#FFFFFF",borderRadius: " 24rpx 24rpx 24rpx 24rpx",views: [{type: "text",text: "我与AI小硒的对话",css: {top: "32rpx",left: "32rpx",fontSize: "36rpx",color: "#000000",maxLines: 2,lineHeight: "52rpx",textAlign: "left",fontWeight: "bold"}},{type: 'image',url: "/agriculturalGrandModel/images/location.png",css: {top: '94rpx',left: '32rpx',width: '32rpx',height: '32rpx',},},{type: "text",text: "来源:富硒农业认知大模型",css: {top: "94rpx",left: "72rpx",fontSize: "24rpx",color: "rgba(0,0,0,0.9)",lineHeight: "40rpx",textAlign: "left",}},{type: 'image',url: '',css: {top: '32rpx',right: '32rpx',width: '100rpx',height: '100rpx',},},{type: 'rect',css: {top: '154rpx',right: '32rpx',width: '620rpx',height: '480rpx',color: "#F5F6F7",borderRadius: "10rpx 10rpx 10rpx 10rpx"},},{type: 'image',url: "/agriculturalGrandModel/images/user-icon.png",css: {top: '176rpx',right: '54rpx',width: '66rpx',height: '66rpx',borderRadius: "50%"},},{type: "text",text: question,css: {width: "435rpx",top: "192rpx",right: "154rpx",maxLines: 3,fontSize: "23rpx",color: "#fff",lineHeight: "36rpx",textAlign: "left",background: "linear-gradient( 273deg, #44BE35 0%, #6ECB63 100%)",boxShadow: "0rpx 2rpx 7rpx 0rpx rgba(0,0,0,0.05)",borderRadius: "20rpx 0rpx 20rpx 20rpx",padding: "20rpx"}},{type: 'image',url: "/agriculturalGrandModel/images/ai-icon.png",css: {top: "360rpx",left: '50rpx',width: '66rpx',height: '66rpx',borderRadius: "50%"},}, {type: "text",text: answer,css: {width: "435rpx",top: "360rpx",left: "150rpx",maxLines: 6,fontSize: "23rpx",color: "rgba(0, 0, 0, 0.90)",lineHeight: "36rpx",textAlign: "left",background: "#fff",boxShadow: "0rpx 2rpx 7rpx 0rpx rgba(0,0,0,0.05)",borderRadius: "0rpx 20rpx 20rpx 20rpx",padding: "20rpx"}},],}
}

效果如下

在这里插入图片描述

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

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

相关文章

Mac版2024 CleanMyMac X 4.15.2 核心功能详解 cleanmymac这个软件怎么样?cleanmymac到底好不好用?

近些年伴随着苹果生态的蓬勃发展&#xff0c;越来越多的用户开始尝试接触Mac电脑。然而很多人上手Mac后会发现&#xff0c;它的使用逻辑与Windows存在很多不同&#xff0c;而且随着使用时间的增加&#xff0c;一些奇奇怪怪的文件也会占据有限的磁盘空间&#xff0c;进而影响使用…

如何在 VM 虚拟机中安装 OpenEuler 操作系统保姆级教程(附链接)

一、VMware Workstation 虚拟机 若没有安装虚拟机的可以参考下篇文章进行安装&#xff1a; 博客链接https://eclecticism.blog.csdn.net/article/details/135713915 二、OpenEuler 镜像 点击链接前往官网 官网 选择第一个即可 三、安装 OpenEuler 打开虚拟机安装 Ctrl …

家居网购项目(手写分页)

文章目录 1.后台管理—分页显示1.程序框架图2.编写数据模型Page.java 3.编写dao层1.修改FurnDao增加方法 2.修改FurnDaoImpl增加方法 3.单元测试FurnDaoTest 4.编写service层1.修改FurnService增加方法 2.修改FurnServiceImpl增加方法3.单元测试FurnServiceTest 5.编写DataUtil…

计算机系列之操作系统的系统

2、大话操作系统的启动 当按下开机键时&#xff0c;BIOS 就会开始执行 ​ BIOS 就是放在主板上 ROM 里面的一段程序。 ​ ROM Read Only Memory&#xff08;只能读取的内存&#xff09; ​ 所以 BIOS 在出厂的时候就可以直接写死在 ROM 里面。 ​ 每次开机的时候&#xff…

windows下已经创建好了虚拟环境,但是切换不了的解决方法

用得多Ubuntu&#xff0c;今天用Windows重新更新anaconda出问题&#xff0c;重新安装之后&#xff0c;打开pycharm发现打开终端之后&#xff0c;刚开始是ps的状态&#xff0c;后面试了网上改cmd的方法&#xff0c;终端变成c盘开头了 切换到虚拟环境如下&#xff1a;目前的shell…

ROS 2边学边练(26)-- 监测参数变化(C++)

前言 通常&#xff0c;一个节点需要对其自身参数或另一个节点的参数的更改做出响应。ParameterEventHandler类使监听参数更改变得容易&#xff0c;这样代码就可以对它们做出响应。 动动手 创建一个包 进入工作空间根路径的src下&#xff08;ros2_ws/src&#xff09;&#xff…

【Python基础】—— scipy.spatial.KDTree、matplotlib.pyplot、imageio

scipy.spatial参考博客&#xff1a;Python点云处理——建立KDtree 1 KDtree算法原理 KDtree构建出了一种类似于二叉树的树形数据存储结构&#xff0c;每一层都对应原始数据中相应的维度&#xff0c;以K层为一个循环&#xff0c;因此被称为KDtree。 每一层的左右子树的划分依据…

视频自定义字幕,中英文,彩色的,你也可以,不会不知道吧

前言 关于【SSD系列】&#xff1a; 前端一些有意思的内容&#xff0c;旨在3-10分钟里&#xff0c;有所获&#xff0c;又不为所累。 字幕&#xff0c;大家见过吧&#xff0c;其实你也可以&#xff0c;真的可以&#xff0c;真的真的可以。不难&#xff0c;不难&#xff0c;真的…

如何评估一个RAG(检索增强生成)系统

本文首发自博客文章 如何评估一个RAG&#xff08;检索增强生成&#xff09;系统 RAG 概念最初来源于 2020 年 Facebook 的一篇论文&#xff0c;这是 Facebook 博客对论文内容的进一步解释 &#x1f449;《检索增强生成&#xff1a;简化智能自然语言处理模型的创建》。大家都知…

【C++对于C语言的扩充】函数重载、引用以及内联函数

文章目录 &#x1f680;前言&#x1f680;函数重载注意&#xff1a;✈️为什么C可以实现函数重载&#xff0c;而C语言却不行呢&#xff1f; &#x1f680;引用✈️引用的特性✈️C中为什么要引入引用✈️引用与指针的区别 &#x1f680;内联函数✈️内联函数特性 &#x1f680;…

GitHub提交PR

本教程只做开源代码库Github工程提交pr的教程&#xff0c;不做其他的深入的讲解 Github和Gitlab的操作类似&#xff0c;只不过Github叫PR&#xff0c;GitLab叫MR&#xff0c;基本上做法是一致的 以开源项目QuickChat为例 https://github.com/Binx98/QuickChat https://github…

C++项目 -- 负载均衡OJ(一)comm

C项目 – 负载均衡OJ&#xff08;一&#xff09;comm 文章目录 C项目 -- 负载均衡OJ&#xff08;一&#xff09;comm一、项目宏观结构1.项目功能2.项目结构 二、comm公共模块1.util.hpp2.log.hpp 一、项目宏观结构 1.项目功能 本项目的功能为一个在线的OJ&#xff0c;实现类似…

研发岗-统信UOS系统配置npm git等前端常用配置

第一步 获取root权限 配置环境等都需要用到root权限&#xff0c;所以我们先获取到root权限&#xff0c;方便下面的操作 下载软件 在UOS应用商店下载的所需应用 版本都比较低 安装node 官网下载了【arm64】的包&#xff0c;解压到指定文件夹&#xff0c;设置链接&#xff0…

苹果电脑启动磁盘是什么意思 苹果电脑磁盘清理软件 mac找不到启动磁盘 启动磁盘没有足够的空间来进行分区

当你一早打开苹果电脑&#xff0c;结果系统突然提示&#xff1a; “启动磁盘已满&#xff0c;需要删除部分文件”。你会怎么办&#xff1f;如果你认为单纯靠清理废纸篓或者删除大型文件就能释放你的启动磁盘上的空间&#xff0c;那就大错特错了。其实苹果启动磁盘的清理技巧有很…

STM32之HAL开发——CubeMX配置串行Flash文件系统

配置流程 在开始配置FATFS前&#xff0c;需要提前配置好RCC的时钟&#xff0c;以及时钟的频率&#xff0c;另外还要配置好Debug选项&#xff08;选择串行&#xff09; 选项介绍 文件系统适用于SD卡&#xff0c;Disk磁盘等&#xff0c;需要我们将对应的驱动打开才可以使用。 …

【vue】Pinia-2 安装Pinia,使用store

1. 安装Pinia 在项目路径下执行npm install pinia 在package.json中查看 2. 使用store 在main.js中添加 import { createPinia } from pinia const pinia createPinia()修改createApp方法 最后示例如下&#xff08;三处修改&#xff09; import { createApp } from vue //…

SimpleImputer缺失数据处理报错解决方案

作者Toby&#xff0c;来源公众号&#xff1a;Python风控建模&#xff0c;SimpleImputer缺失数据处理报错解决方案 今天有学员反馈缺失值代码报错&#xff0c;由于sklearn缺失值处理的包升级&#xff0c;下面把官网最新的缺失值处理代码奉上。 参考https://scikit-learn.org/st…

请把「睡一个好觉」,当成一天里最重要的事来管理

我发现许多人都有这么一种情况&#xff1a;明明知道睡眠很重要&#xff0c;但却总是有意无意地熬夜。 比如&#xff1a; 给自己排了太多的学习和工作量&#xff0c;一不小心就到了凌晨一两点&#xff1b; 总觉得过去的一天什么都没干&#xff0c;宁愿在网上闲逛&#xff0c;也不…

低代码开发平台权威推荐:创新开发、领跑市场!

Gartner是低代码领域的一家权威机构&#xff0c;该机构常常通过"魔力象限"的研究方法&#xff0c;评选全球范围内IT细分领域的产品&#xff0c;来帮助决策者提供重要的咨询建议。本文盘点了Gartner机构推荐的6款低代码平台&#xff1a;Zoho Creator、Mendix、Oracle、…

JVM结构化体系

目录 目录 1.JVM 简介 1.1. 如何理解 JVM 呢&#xff1f; 1.2. 市场主流 JVM 分析&#xff1f; 1.3. 为什么要学习 JVM&#xff1f; 1.4. 字节码底层是如何执行呢&#xff1f; 如何理解 JIT 呢&#xff1f; 为什么 JVM 中解释执行与编译执行的并存&#xff08;混合模式&…