这是自己做小程序生成推广海报,并保存到本地相册的方法,向后台发起请求,返回一个海报图片,下载保存到相册, 如果只是单纯的下载图片代码43行-63行就足够了 如果想直接保存到相册,则不要做downFile的处理,直接调用saveImageToPhotoAlbum,线上版本无法保存临时路径的图片 具体看代码: //选中轮播图中的一个作为海报背景图.可自行实验,只是自己的总结 bindchange: function(a) { for (var t = this, o = a.detail.curre…

背景 由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈.而小程序 Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆 boilerplate code ,而且一不小心还会踩到 Canvas 的各种彩蛋(坑).我想此时你的心情肯定是这样的. 分析 想到小程序中有如此大量的生成图片需求,而 Canvas 生成方法又是如此难用和坑爹.那我们就想到可不可…

1.页面 <canvas canvas-id="shareCanvas" style="width:600px;height:900px"></canvas> 2.绘制图片 通过使用wx.downloadFile或wx.getImageInfo这个API来下载一个网络图片到本地(并可获取该图片的尺寸等其他信息),然后调用ctx.drawImage方法将图片绘制到画布上,填满画布 wx.downloadFile({ url: 'https://…

前言 微信小程序需要生成海报进行朋友圈分享,但是不同的手机会有问题, 然后首先是图片的问题 图片 在模拟器上没有报错,可是真机测试却什么也没画出来. canvas.drawImage 是不支持网络图片的,只支持本地图片. 所以,任何的网络图片都需要先缓存到本地,(当然上线的时候需要把网络图片的前缀加入白名单里面) 再通过 drawImage 调用存储的本地资源进行绘制, 缓存可以通过 wx.getImageInfo 和 wx.downloadFile 实现 wx.getImageInfo({ s…

效果图: <view class='poste_box' id='canvas-container' style="margin:0 auto;border-radius:16rpx;overflow:hidden;width:690rpx;height:846rpx"> <canvas canvas-id="myCanvas" style="width:690rpx;height:846rpx;"></canvas…

test.wxml <canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id="myCanvas" class='canvas' hidden='{{hideme}}'></canvas> <image wx:if="{{tempPath!=''}}" class="viewimg" src="{…

主要思路: 1.先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串 2.计算另起的行总数,比如总共3行,也就是说将原来的一个长字符串按宽度分成了3行,然后循环绘制出这3行字符串即可. 注意事项: 就是需要 a-- 那里,防止丢失字符的情况,假如不 a-- 的话,那么每换行时就会少一个字. ctx.setFontSize() ctx.fillStyle = "#000"…

一. 关于wx.openSetting 接口废弃后的通过其他方式重新设置权限的问题 最近小程序更新了后,导致以下报错 "openSetting:fail 此接口已废弃,请使用 OpenSetting 组件" 阅读官方文档发现此功能已经转移到button组件中了 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.openSetting.html openSetting接口废弃说明 https:…

对于小程序的分享, 除了分享给朋友, 好友群,是可以直接做到的, 但是要想扩大推广范围, 通过生成海报图片, 将自己小程序码带进去,应该是目前我所知的好办法了. 但是海报也不是那么好搞.之前自己手写出来的, 效果可以是可以,但问题还是百出,只能怪自己的技术还不到家......(加油). 昨天在逛小程序社区时,发现了一个海报插件.就动手试了试,效果还是让我比较满意的. Wxml2Canvas  https://github.com/wg-front/wxml2canvas(感谢大神的插件)  插件…

目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用canvas画布生成社团活动的海报图片,便于社团活动宣传以及对小程序的推广. 场景:用户A觉得某个社团的活动很不错,因此点击"分享"按钮,生成一个该活动的海报图片,接着,用户A把该图片发到某个群或者朋友圈进行传播,用户B看到该图片后对这个活动蛮感兴趣,通过长按识别图片中的小程序码,能够进入…