前言近期需要开发一个微信小程序生成海报分享的功能。在h5一般都会直接采用html2canvas或者dom2image之类的库直接处理。但是由于小程序不具备传统意义的dom元素,所以也没有办法采用此类工具。所以就只能一笔一笔的用canvas画出来了,下面对实现这个功能中遇到的问题做一个简单的复盘。制作要求:主题切换。图片弹框展示,适应不同的手机尺寸。图片上层有弹出框展示保存图片按钮。海报内容,标题部分根据实际内容展示,可能为一行也可能为两行描述部分,最多展示四行,超出的显示成…圆角图片展示圆角虚线框基本方案流程预先加载好所有需要的图片。在偏离视窗显示区域使用canvas绘制海报,并生成临时文件。
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方有完整代码,如各位大神发现问题后请友好的交流勿喷。⏳示例图⏳图片引用想要用cavans生成海报,首先要解决的是,将图片素材引入至canvas画布中,小程序的canvas没有办法直接使用网络图片,所以首先要把网络中的图片获取到,并已文件的格式存入内存中,利用uniapp的api简单的封装了一个获取图片的函数//下载图片urlToFile(url){returnnewPromise((resolve)=
在ChatGPT的带动下,AIGC可以说是过去一年里最火的概念。就在临近春节的日子里,一款名为“写作蛙”的微信小程序正在悄然流行。简单输入几句祝福语,就能自动生成图文并茂的祝福海报,包括一段应景的祝福语和一张节日氛围满满的照片,让AIGC和普通网民来了场近距离的邂逅。深入了解后发现,“祝福海报”的服务提供商是智谱AI,一家起源于清华大学计算机系知识工程实验室的创业团队,一直定位于做中国最好的大模型,主导研发了多语言千亿级超大规模预训练模型,构建了高精度通用知识图谱,并将两者有机融合打造了数据与知识双轮驱动的认知引擎。此外,“祝福海报”功能基于昇腾AI,满足了实时的新春祝福生成需求,由西安未来人
号外!「万象格新」大赛开启 如果阳光暖到你心里,那一定是一格在想你~春夏交替,万物焕发生机,明媚色彩娱情惬意在这样一个美好的时节如果你:心中荡漾着色彩斑斓的AI绘画创意想要show出独到的审美与非凡设计能力期待打破色彩与灵感的界限,重塑绘画与设计的格局现在,专属于你的画板已经准备好,等你来创造!文心一格AI绘画大赛全新升级联动百家号艺术频道及优设网开启「万象格新」春夏流行色主题AI绘画X海报设计大赛双赛道同步开启,奖池加码,等你挑战!无论你是⭐️ 奇想独具的元宇宙小画家,能用文心一格AI画笔绘就色彩斑斓的主题AI画作⭐️ 天赋异禀的设计爱好者、艺术达人,能够将主题AI画作“变身”为精美的海报
前端Vue一款基于canvas的精美商品海报生成组件根据个性化数据生成商品海报图长按保存图片,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13326效果图如下:cc-beautyPoster使用方法posterData:{//用户姓名name:'小明',//用户头像logo:'https://cdn.pixabay.com/photo/2014/02/17/10/20/statue-of-liberty-267948_1280.jpg',//商品名称title:'精美时尚苹果手机一部',//商品价格money:'5200
Midjourney大家都很熟悉了,大大提高了UED团队出稿制作效率。画面创意也为设计师的思维拓宽了新的边界。此外,Midjourney的多领域专业知识也成为设计师跨越不同领域的有力工具。今天就给大家分享一个Midjourney商业化UI应用——ChatGPT分享会海报!第一步,找到合适的图片制作海报第一步就是找到想要的参考图片,用图片来控制出效果图是最快的,而且这个方法非常好用!如下如找到合适的关于ChatGPT相关的图片。这里我的思考是关于:机器人、科技、人工智能等等。 第二步,图生关键词找好了上面的关键词后,可以用“/describe”命令生成关键词,一共会生成四组。我们在这四
前言关注「元壤教育」公众号,系统学习更多AIGC课程。看完这篇实操教程,设计师该领盒饭了,哈哈,开个玩笑,各位老板看着办。本教程针对完全没有设计基础的老板们,手把手教你3分钟利用Midjourney轻松打造炫酷海报。废话不多说,直接讲步骤这里有两种方法,不过本教程我们先讲解第二种。直接通过prompt生成海报,然后再调试,最后得到我们想要的炫酷海报,这个方法后续慢慢讲,先关注**「元壤教育」**公众号哈。给Midjourney喂图,提取prompt,以图生成。第一步:先到爱设计或者懒人设计或者图虫设计或者其他设计网站找一个炫酷的参考海报。我先移步到爱设计https://www.isheji.c
微信小程序可以通过使用标签来实现生成海报的功能。以下是基本实现步骤:1.在WXML文件中创建一个标签,并设置其宽度和高度属性。’canvascanvas-id="myCanvas"style="width:300px;height:400px;">/canvas>2.在JS文件中,获取到标签的上下文对象。constctx=wx.createCanvasContext('myCanvas');3.在ctx上下文对象中,使用各种绘图API绘制出海报的内容//绘制背景色ctx.setFillStyle('#fff');ctx.fillRect(0,0,300,400);//绘制文字ctx.setFo
前段时间有个项目,需要绘制海报,我一听这不是可以用canvas来实现吗,所以我在五一假期就记录下实现方式我把canvas绘制图片封装成一个组件,直接引入使用就好了。这里虽然是uni-app写的,但实现方式其实都是一样的,之后其他原生小程序用到也是大差不大的,真的很简单😆遇到的坑:uni-app在转app的时候-ios的canvas画布过大可能导致绘制空白 创建canvas绘制图片的组件-代码如下 exportdefault{ name:"drawImage", props:{ //绘制图片的尺寸 imageSize:{ type:Object, default:
背景:基于uniapp实现微信小程序中商品详情的海报生成与保存效果图:思路:首先把海报上需要的内容准备好,比如用户头像,商品信息,二维码等。需要注意的是,因为二维码是动态生成的,所以需要后端传给我们,前端需要把路径和参数传给后端,后端请求微信服务接口,通过配置对应的参数就可以生成一个二维码啦,再将二维码发送给前端。图片不能是网络图片,我们需要的是本地图片,如非本地图片,那我们需要对图片进行处理。uniapp可以通过uni.getImageInfo获取图片本地路径(uni.chooseImage(OBJECT)|uni-app官网(dcloud.net.cn))如果通过临时路径来保存图片,can