微信小程序用canvas生成分享朋友圈的海报

最新推荐文章于 2024-07-25 07:46:51 发布
最新推荐文章于 2024-07-25 07:46:51 发布
阅读量7k 收藏 4
点赞数
分类专栏： 小程序 文章标签： 小程序 分享朋友圈 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NB_666/article/details/81205249
版权

在公司遇到一个需求小程序分享到朋友圈，套路就是生成小程序的二维码图片，技术思路简单点直接下载小程序二维码的图但是这么简单就不用多BB写文章分享了，复杂点就是用canvas画出一张图片效果如下。

说一下解决过程吧
1.小程序canvas画图自己一点点画需要不停的算东西而且小程序绘图API还是有点小多的对于一个刚接触的新手，功能又有时间限制的我来说无疑是崩溃的，为了不让自己被产品拿去祭天找到了一个库，能够快速的帮助我完成任务
Painter （希望有一天我也能有功力写出库共大家用 努力。。。。。）

2.在使用Painter库的时候，让canvas绘制图片虽然图片路径给svg或者Base64在小程序开发工具上能显示但是真机上就不能显示，小程序大小又有限制所以图片只能放到静态资源服务器上了

3.给加载图片来绘制到canvas给一个loading交互，也就是在setData的时候给个这个代码

当绘图完成后Painter会有一个方法叫ImgOK给这个方法写个隐藏loading就好了

最低0.47元/天 解锁文章
NB_666
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序分享朋友圈生成海报
马冠亚的博客
10-22 3万+
微信小程序实现分享到朋友圈 分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存，然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。（老规矩，我的博客复制粘贴就好使） 先看一下效果图： 一、先把代码写上去 index.wxml代码： <view class="container"> <image src="{{shareImage}}" class...
微信小程序使用canvas生成分享海报功能复盘
weixin_41489378的博客
01-30 2902
近期需要开发一个微信小程序生成海报分享的功能。在h5一般都会直接采用或者dom2image之类的库直接处理。但是由于小程序不具备传统意义的dom元素，所以也没有办法采用此类工具。所以就只能一笔一笔的用canvas画出来了，下面对实现这个功能中遇到的问题做一个简单的复盘。主题切换。图片弹框展示，适应不同的手机尺寸。图片上层有弹出框展示保存图片按钮。海报内容，标题部分根据实际内容展示，可能为一行也可能为两行描述部分，最多展示四行，超出的显示成…圆角图片展示圆角虚线框。
微信小程序用canvas生成分享图片，微信朋友圈海报
xiexikk的博客
03-13 3158
小程序的canvas画布绘图与h5的canvas有类似的功能，小程序的应用场景大多数是用于制作分享图，模块上是有文字、图片等等变量时，因为只有图片才能保存到相册，所以得先把模块合成为一张图片，此时canvas就能显示它的强大功能了。 具体可查阅官方小程序[canvas组件的api]应用； 本案例还增加了切换卡片的功能，可忽略，不过这里配合了canvas的操作，也可以参考一下； 先看效果图： (个人...
uniapp_canvas生成海报_微信小程序海报
分享程序相关知识
05-09 1076
uniapp_vue3版本做微信小程序项目，生成海报功能，使用canvas进行实现，适配各种型号手机。
微信小程序 canvas生成海报
guoqing的博客
04-28 1295
最近遇到个需求，需要根据一个指定的页面，生成图片并且进行保存，大致就是需要在canvas上画出来和当前页面一样内容，然后转存为图片这样。 准备工作 先获取到canvas对象 const query = wx.createSelectorQuery() query.select('#myCanvas') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = c
微信小程序使用canvas生成海报并分享小程序、或者下载分享到朋友圈
随身笔记
09-07 1622
现在好些小程序都会出现这个功能，在使用canvas生成海报时应注意一下几个问题： 1、如果海报中有图片，尽量使用异步，等图片加载完毕在进行画图，这样可以避免海报加载不出来或者空白等问题 2、海报中的图片可为本地图片或者线上图片，本地图片没什么问题；线上图片：首先要考虑图片的域名是否已经配置，这个在测试中最好关闭本地设置中的不合法域名校验，这个以避免本地运行正常，上线后海报无法生成问题 3、下载海报时应注意小程序是否有图库的访问权限 好的，问题说完了，看一下代码吧（PS:代码会生成海报以及一个转发分享
微信小程序如何利用canvas生成朋友圈分享海报
weixin_34204722的博客
03-06 565
主要步骤 1、把海报样式用标签先写好，方便画图时可以比对 2、用canvas进行画图，canvas要注意定好宽高 3、canvas利用wx.canvasToTempFilePath这个api将canvas转化为图片 4、将转化好的图片链接放入image标签里 5、再利用wx.saveImageToPhotosAlbum保存图片 坑点 1、用canvas进行画图的时候要注意画出来的图的大小一定要是你...
微信小程序用canvas画海报生成照片保存相册
low666的博客
01-02 932
微信小程序用canvas画海报生成照片保存相册 效果展示 代码实现 1.wxml <button bindtap='formSubmit'>生成海报</button> <view class='imagePathBox' hidden="{{maskHidden == false}}"> <image src="{{imagePath}...
小程序如何生成海报分享朋友圈(1)
wang688699的博客
04-20 524
至此所有的步骤都已实现，在绘制的时候会遇到一些异步请求后台返回的数据，所以我用promise和async和await进行了封装，确保导出的图片信息是完整的。在绘制的过程确实遇到一些坑的地方。比如初开始导出的图片比例大小不对，还有用measureText测量文字宽度不对，多次绘制（可能受网络原因）有时导出的图片上的文字颜色会有误差等。如果你也遇到一些比较坑的地方可以一起探讨下做个记录，下面附下完整的代码。
微信小程序 —— canvas生成海报图与分享
Rainy_X的博客
12-24 1453
整体思路 获取手机屏幕大小去依据设计尺寸比例调整 赋值图片路径 canvas生产图片（要注意顺序） 获取用户相册权限 保存相册 效果图 代码示例 wxml <view style="position: absolute;bottom: 0;left: 0;color:#000;z-index:99999"> 坐标: ({{x*2}}, {{y*2}}) </view> <block wx:if="{{canvasType}}"> <!-- style
微信小程序实现canvas分享朋友圈海报
11-20
总结起来，实现微信小程序canvas分享朋友圈海报的功能，需要掌握微信小程序的API，canvas绘图技术，图片处理，以及事件监听和权限管理。通过合理的布局设计和编程逻辑，可以创建出具有吸引力的个性化分享海报。
微信小程序生成海报分享朋友圈的实现方法
11-29
2、利用小程序生成海报保存图片到相册分享到朋友圈，用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的 实现方案 一、分析如何实现 相信大家应该都会有类似的迷惑，就是如何按照产品设计的那样绘制成...
微信小程序生成海报demo
10-11
生成海报功能则是微信小程序中一种实用的工具，通常用于用户分享商品、活动或者个人成就等，用户可以自定义选择信息，如图片、文字、二维码等，一键生成一张美观的海报图片，然后分享到朋友圈或聊天中。 在这个demo...
微信小程序上canvas绘制图片助手一个json就制作分享朋友圈图片
08-10
在微信小程序中，canvas元素是实现动态图像生成和复杂图形绘制的重要工具，尤其适用于创建自定义分享图、海报等。本教程将详细讲解如何利用JavaScript开发微信小程序，并借助canvas功能，仅通过一个json配置文件就能...
基于JAVA+SpringBoot+Vue+uniApp的校园日常作品商品分享小程序
znbcj的博客
07-24 956
基于JAVA+SpringBoot+Vue+uniApp的校园日常作品商品分享小程序是一款专为校园内的学生和教师设计的移动应用程序。该小程序旨在提供一个便捷的平台，让学生和教师能够轻松地分享自己的手工制作、设计作品或二手物品，同时也方便其他用户浏览和购买这些商品。通过这款小程序，校园内的学生们可以轻松地将自己的作品分享给其他同学，增加彼此之间的交流和合作机会；同时，教师们也可以借此平台推广自己的教学成果或者寻找合适的教学资源。此外，该小程序还有助于减少校园内的浪费现象，提高资源的利用率。
企业利用AI智能名片S2B2C商城小程序参与社区团购的风险与机遇分析
最新发布
专注MarTech应用研究与实施方案
07-25 1043
在新零售浪潮的推动下，社区团购以其独特的商业模式迅速崛起，成为连接消费者与供应商的重要桥梁。企业纷纷探索如何有效利用这一新兴渠道，以扩大市场份额、提升品牌影响力。AI智能名片S2B2C商城小程序的引入，为企业参与社区团购提供了更为智能化、高效化的解决方案。本文旨在深入探讨企业利用AI智能名片S2B2C商城小程序参与社区团购所面临的风险与机遇，分析其在优化供应链管理、提升用户体验、增强市场竞争力等方面的具体作用，并提出相应的策略建议，以期为企业在新零售时代下的转型升级提供参考。
C# 二维码小程序
a876106354的博客
07-24 270
在C#中创建一个能够生成二维码的小程序，你可以使用。你可以通过NuGet包管理器来安装。首先，你需要在你的项目中安装。
基于JAVA+SpringBoot+uniapp的心理小程序(小程序版本)
znbcj的博客
07-23 878
心理小程序主要给心理医生和用户提供一个心理测试的平台，其中主要功能有用户进行测试，心理医生上传试卷，得到测试结果，贴吧交流，心理医生咨询等等JAVA：Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值