小程序使用Painter生成海报

文档
js源码

https://pan.baidu.com/s/10os-vr0mWsBwx08oXK2caQ 
提取码: y1tw

在这里插入图片描述

我是直接下载github源码放到项目组件中

在这里插入图片描述

{"usingComponents": {"painter": "../../component/painter/painter"}
}

注意踩过的坑:下面painter 这行代码放在最外层,不能放在view弹窗里面,否则弹窗生成第二次生成的时候会破板.

<view class="box"><painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" /><image mode="widthFix" src="{{image}}" bindtap="previewImg" /><view class="save" hover-class="hoverClick" bindtap="getSave">保存图片</view>
</view>

纯Json驱动生成海报,使用很方便

Page({data: {template: {},image: "",width: 750,height: 1334,frameWidth: 690,code: "https://sucai.suoluomei.cn/sucai_zs/images/20200509145410-%E9%A6%96%E5%9B%BE.jpg",askName: "周某",askAvatar: "https://sucai.suoluomei.cn/sucai_zs/images/20200523094058-1.jpg",answerName: "老师",answerAvatar: "https://sucai.suoluomei.cn/sucai_zs/images/20200523094058-1.jpg",askText: "问题问题问题问题问题问题问题问题问题问题问题问题问题问题",answerText: "答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案",time: "2020_4_1"},onLoad() {this.getDraw()},getDraw() {wx.showLoading({title: '正在努力生成中',})this.setData({template: {background: '#30C4A7',width: this.data.width + 'px',height: this.data.height + 'px',views: [{type: 'text',text: this.data.askName + " @精致女主圈",css: {top: '30px',left: '33px',fontSize: '30px',color: "#fff"},}, {type: 'text',text: "12580+人 都在这里提问",css: {top: '90px',left: '33px',fontSize: '28px',color: "#fff"},}, {type: 'image',url: this.data.code,css: {top: '30px',right: '30px',width: '126px',height: '126px',borderRadius: '10px',mode: "widthFix"},}, {type: 'rect',css: {top: '180px',left: '30px',width: this.data.frameWidth + 'px',height: '1000px',borderRadius: '10px',color: '#fff',},}, {type: 'image',url: this.data.askAvatar,css: {top: '230px',left: '174px',width: '100px',height: '100px',borderRadius: '50px',mode: "aspectFill"},}, {type: 'text',text: this.data.askName,css: {top: '350px',left: this.data.frameWidth / 2 - 125 + 'px',fontSize: '30px',color: "#000",align: 'center',maxLines: 1,//限制行数},}, {type: 'image',url: "https://sucai.suoluomei.cn/sucai_zs/images/20200523095111-54.png",css: {top: '280px',left: '313px',width: '123px',mode: "widthFix"},}, {type: 'text',text: "提问",css: {top: '250px',left: '347px',fontSize: '30px',color: "#000"},}, {type: 'image',url: this.data.answerAvatar,css: {top: '230px',right: '174px',width: '100px',height: '100px',borderRadius: '50px',mode: "aspectFill"},}, {type: 'text',text: this.data.answerName,css: {top: '350px',right: this.data.frameWidth / 2 - 125 + 'px',fontSize: '30px',color: "#000",align: 'center',},}, {type: 'text',text: this.data.askText + this.data.answerText,css: {maxLines: 2,lineHeight: "40px",width: "629px",top: '420px',left: "60px",fontSize: '30px',color: "#000"},}, {type: 'text',text: this.data.answerText,css: {maxLines: 7,lineHeight: "40px",width: "629px",top: '550px',left: "60px",fontSize: '30px',color: "#000"},}, {type: 'text',text: this.data.time,css: {top: '850px',right: "60px",fontSize: '28px',color: "#666666"},},{type: 'image',url: this.data.code,css: {top: '900px',left: this.data.width / 2 - 100 + 'px',width: '200px',height: '200px',mode: "aspectFill"},},{type: 'text',text: "长按或保存二维码查看原文",css: {top: '1120px',left: this.data.width / 2 + 'px',fontSize: '28px',color: "#666666",align: 'center',},},],}})},// 生成成功canvasSuc(e) {console.log(e)wx.hideLoading()this.setData({image: e.detail.path})},getSave() {wx.getSetting({success: (set) => {wx.saveImageToPhotosAlbum({filePath: this.data.image,success: (res) => {if (res.errMsg == "saveImageToPhotosAlbum:ok") {wx.showToast({title: '保存成功',});}}})if (set.authSetting['scope.writePhotosAlbum'] == false) {wx.openSetting()}}})},previewImg() {wx.previewImage({current: this.data.image,urls: [this.data.image]})},
})

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

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

相关文章

端午送祝福语小程序源码

端午即将来临&#xff0c;端午节&#xff0c;又称端阳节、龙舟节、重五节、天中节等&#xff0c;是集拜神祭祖、祈福辟邪、欢庆娱乐和饮食为一体的民俗大节。是我国四大传统节日之一。 今天给大家奉上一款小程序&#xff0c;端午节送祝福的&#xff0c;只有前端页面&#xff0…

程序员写的春联你见过吗

小年已经来到&#xff0c;春节还会远吗&#xff1f; 那么&#xff0c;什么最能代表春节的仪式感呢&#xff1f; 那自然就是家家户户门上的对联&#xff0c;大街小巷的红灯笼。 那作为一名程序员&#xff0c;怎么能不发挥自己的特长来发扬中国传统文化呢。 先来一幅程序员写的…

微信小程序绘制海报

前言 实现海报&#xff1f;你想到的应该是html2canvas吧&#xff0c;但&#xff0c;这里是小程序&#xff0c;好像并不通用。只能用canvas一笔一划去描述了吗&#xff1f;答案肯定是不对的&#xff0c;今天介绍一个Painter插件&#xff0c;它可以帮助你快速完成小程序上的海报…

科研人员和各科老师写的学科春联新鲜出炉,祝您和家人“牛年快乐”!

本文来源&#xff1a;好教师和口袋科研 给各位科研人员的对联&#xff1a;愿成为祝新的一年&#xff0c;多发paper&#xff0c;少掉头发、申基金、评职称两开花&#xff01; 上联&#xff1a;自然科学基金权当寒假作业&#xff0c;莫说科研知音少 下联&#xff1a;重点研发计划…

案例:写春联

案例&#xff1a;写春联 编程代码 import turtleturtle.Screen().bgcolor("#ffc373") # 设置背景颜色为#ffc373&#xff0c;一种黄色。 color_word "black" # 设置书法的颜色为black。 color_paper "#ea182a" # 设置红纸的颜色为#ea182a横…

喜鹊招牌体-喜鹊造字喜鹊字体

喜鹊万人造字体.ttf 喜鹊乌冬面(简 繁体).ttf 喜鹊乐敦体.ttf 喜鹊古字典体(简 繁体).ttf 喜鹊古风小楷(简繁).ttf 喜鹊在山林体&#xff08;简 繁体&#xff09;.OTF 喜鹊小轻松体.TTF 喜鹊招牌体(简 繁体).ttf 喜鹊木叶体(简 繁体).ttf 喜鹊梅花楷体(简 繁体).ttf 喜鹊燕书体…

用canvas绘制微信小程序海报页面并保存相册-适用微信原生

微信小程序绘制海报并保存相册 tip&#xff1a;代码中使用的是uni的api 如果使用原生微信小程序开发&#xff0c;可以把uni更换成wx使用 文章目录 微信小程序绘制海报并保存相册前言一、分析需求二、准备数据三、编码开始html部分解析&#xff1a; js部分1、准备好数据后开始绘…

火爆的AI绘画+红包封面+春联+节日头像+创作者入驻小程序源码

2023年新年&#xff0c;红包封面皮肤在前几年一直都很火爆&#xff0c;每次过年过节&#xff0c;几乎家家都会互发红包进行庆祝贺岁&#xff0c;这个时候一个简单的红包封面就会显得多么的与众不同。 Ai文字绘画&#xff0c;&#xff0c;&#xff0c; 红包封面领取 小程序 …

ChatGPT死活不认27能被3整除,网友:不是说AI要统治世界了吗?

Alex 羿阁 发自 凹非寺量子位 | 公众号 QbitAI 让众人疯狂的网红AI ChatGPT&#xff0c;原来也有明显的短板&#xff1f; 一段“网友调教这只AI”的聊天记录&#xff0c;在网上传开了。 可以看到&#xff0c;AI起初居然说27是个质数。 在网友向其提出质疑后&#xff0c;AI仍嘴硬…

OpenAI 重磅更新 变得更强啦 | 包括更多可控的 API 模型、函数调用能力、更长的上下文和更低的价格

文章目录 一、前言二、主要内容三、总结 &#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 OpenAI 官网&#xff1a;https://openai.com/blog/function-calling-and-other-api-updates 功能调用和其他 API 更新。OpenAI 宣布更新&#xff0c;包…

自己写的一段预测双色球号码的Java代码

原理是根据双色球开奖的历史数据&#xff0c;根据各种易经八卦&#xff0c;天时等随机因素预测下一期的双色球号码。 完整代码在我的github上&#xff1a; MainFrame.java是主程序&#xff1a; package ball;public class MainFrame {public static void main(String[] args) …

20211217使用python3通过最近6期的双色球开奖结果预测新一期的号码

20211217使用python3通过最近6期的双色球开奖结果预测新一期的号码 酬金/劳务费用&#xff1a;小奖请吃饭。 大奖给你技术支持费用&#xff01; 按照你如今加班工资的2倍计酬&#xff01; 第一步&#xff0c;希望2周完成&#xff0c;大概完成时间2021-12-15&#xff1a; a1*x1…

《LSTM神经网络和双色球预测例子》

前言&#xff1a; 书接上回&#xff0c;通过把历年来的双色球蓝球数据爬取&#xff0c;可以看出&#xff0c;每期双色球蓝球之间并无任何关系&#xff0c;但仍存在问题&#xff1a; 决定蓝球数字可能并非取决于上一期蓝球的数据&#xff0c;可能取决于当期红球的数据&#xff0…

《基于LSTM神经网络的双色球蓝球数字预测》

结论&#xff1a;没有任何作用&#xff0c;基本可以断定这是真正随机的数字。 LSTM神经网络&#xff0c;单步预测&#xff0c;循环2000次&#xff0c;100个神经元&#xff0c;无dropout。 蓝线&#xff1a;最近50期蓝球数字 橙线&#xff1a;LSTM网络预测数字 绿线&#xff1a…

数学建模预测模型实例(三)---双色球概率预测模型

双色球概率预测模型 数学建模预测模型实例&#xff08;一&#xff09;—大学生体测数据模型 数学建模预测模型实例&#xff08;二&#xff09;—表白墙影响力量化模型 python预测算法—线性回归 双色球概率预测模型 前言 最近新晋彩民佩瑞对于双色球产生了极为浓厚的兴趣&am…

AIGC 工具推荐:利用 AI 提高工作效率的利器

人工智能&#xff08;AI&#xff09;正在改变我们的生活&#xff0c;使我们的工作更加高效和智能化。在这个快速发展的领域中&#xff0c;有许多 AI 实用工具可以帮助我们更好地完成工作。在未来熟练使用各种 AI 工具优化你的工作流并提高工作效率将是每个人的必备技能&#xf…

Ubuntu Go语言环境配置【GPT-4版】

目录 go语言的培训网课安装goGPT-4给出的过程在VSCode里怎样正确配置好Go的调试相关设置&#xff1f;如果我在Visual Studio Code中安装Go语言的相关工具总是失败怎么办&#xff1f;我已重启Visual Studio Code&#xff0c;接下来应该怎样检查日志&#xff1f;如果我还是不能成…

Monica - 你的 GPT-4 人工智能助手

Monica介绍 官方地址&#xff1a;https://monica.im/?cX0OHBN1S &#xff08;仅限今天&#xff0c;通过这里注册可免费获取100次Monica查询&#xff09; Monica 是一款由 ChatGPT API 提供支持的扩展程序&#xff0c;它可以与您讨论任何事情&#xff0c;使用 80 多个模板生成文…

初学者使用Auto-GPT入门:设置和使用

初学者使用Auto-GPT入门&#xff1a;设置和使用 简介&#xff1a;1. 快速演示2. 要求3. 设置OpenAI使用限制&#xff08;可选&#xff09;4. 安装Python5. 安装Git6. 安装 virtualenvwrapper&#xff08;可选&#xff09;6.1 使用 pip&#xff0c;您可以轻松地在 Python 环境中…

最近热门话题-Auto GPT 初学者Auto GPT 入门:设置和使用

Auto-GPT 是一个实验性的开源应用程序&#xff0c;展示了著名的 GPT-4 语言模型的功能。 它使用 GPT-4 执行复杂的任务并实现目标&#xff0c;而无需太多人工输入。 Auto-GPT将OpenAI的GPT模型的多个实例链接在一起&#xff0c;允许它做一些事情&#xff0c;比如在没有帮助的…