参考一下:https://developers.weixin.qq.com/community/develop/article/doc/00026856f8083042d3a0b739a6bc13
Canvas2d绘制图片绘制不上去?页面中点击红色按钮,会触发绘制操作,点一次只绘制了文字,点第二次才会出现图片,有时间点多次图片才会全部出现. 请大佬帮忙看看,代码能直接用,求大佬帮忙!!!! html <view> <canvas type="2d" id="canvas" class="canvas"></canvas> </view> <view bind:tap="saveImg" style="width: 100rpx;height:100rpx;background-color: red;"></view> css .canvas { width: 600rpx; height: 1000rpx; } js var app = getApp(); Page({ /** * 页面的初始数据 */ data: { canvas: null, giveInfo: null, zanIconUrl: null, head1Url: null, head2Url: null, head3Url: null, head4Url: null, head5Url: null, xcxmUrl: null, petPicUrl: null }, onLoad(options) { var that = this; this.setData({ //上一页传递的数据 giveInfo: JSON.parse(options.giveInfo) }) this.setData({ //网络图片,但是在前置页面已经全部通过 wx.getImageInfo 加载到了内存中 //https://pet.ycho.cc/media/static/head1.png 可以全部替换这个用 zanIconUrl: app.globalData.zanIconUrl, head1Url: app.globalData.head1Url, head2Url: app.globalData.head2Url, head3Url: app.globalData.head3Url, head4Url: app.globalData.head4Url, head5Url: app.globalData.head5Url, xcxmUrl: app.globalData.xcxmUrl, petPicUrl: app.globalData.petPicUrl }) var that = this; var query = wx.createSelectorQuery(); query.select('#canvas') .fields({ node: true, size: true }, function (res) { var canvas = res.node; var ctx = canvas.getContext('2d'); //兼容尺寸 var sys = wx.getSystemInfoSync(); var dpr = sys.pixelRatio; canvas.width = res.width * dpr; canvas.height = res.height * dpr; ctx.scale(dpr, dpr); that.setData({ canvas: canvas }) }) .exec() }, onShow() { }, onReady() { }, //点击绘制画布 saveImg() { var that = this; app.vibrateShort(); var canvas = this.data.canvas; var ctx = canvas.getContext('2d'); //开始绘制 //背景颜色 ctx.fillStyle = '#FFFFFF'; //整体大小 ctx.fillRect(0, 0, 300, 500); // 头像 var petImg = canvas.createImage(); petImg.src = that.data.head1Url; ctx.drawImage(petImg, 10, 20, 40, 40); //昵称 ctx.fillStyle = '#8187A6'; ctx.font = 'bold 16px sans-serif'; ctx.fillText(that.data.giveInfo.petName, 60, 40, 200); //标题 ctx.fillStyle = '#000000'; ctx.fillText('快来益宠领养我吧', 60, 65); //宠物照片 var petImg = canvas.createImage(); petImg.src = that.data.petPicUrl; ctx.drawImage(petImg, 60, 80, 200, 250); //时间 ctx.fillStyle = '#9195A3'; ctx.font = '12px sans-serif'; ctx.fillText('刚刚', 60, 350); //功能 ctx.fillStyle = '#F7F7F7'; ctx.fillRect(250, 335, 40, 20); //圆圈 ctx.fillStyle = '#5E678F'; ctx.arc(265, 345, 3, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = '#5E678F'; ctx.arc(275, 345, 3, 0, 2 * Math.PI); ctx.fill(); //点赞 ctx.fillStyle = '#F7F7F7'; ctx.fillRect(60, 370, 230, 40); var zanImg1 = canvas.createImage(); zanImg1.src = that.data.zanIconUrl; ctx.drawImage(zanImg1, 65, 385, 15, 15); var headImg1 = canvas.createImage(); headImg1.src = that.data.head1Url; ctx.drawImage(headImg1, 90, 375, 30, 30); var headImg2 = canvas.createImage(); headImg2.src = that.data.head2Url; ctx.drawImage(headImg2, 130, 375, 30, 30); var headImg3 = canvas.createImage(); headImg3.src = that.data.head3Url; ctx.drawImage(headImg3, 170, 375, 30, 30); var headImg4 = canvas.createImage(); headImg4.src = that.data.head4Url; ctx.drawImage(headImg4, 210, 375, 30, 30); var headImg5 = canvas.createImage(); headImg5.src = that.data.head5Url; ctx.drawImage(headImg5, 250, 375, 30, 30); //二维码标题 ctx.fillStyle = '#000000'; ctx.font = 'bold 13px sans-serif'; ctx.fillText('长按识别二维码领养TA', 60, 460); //二维码 var ewmImg = canvas.createImage(); ewmImg.src = that.data.xcxmUrl; ctx.drawImage(ewmImg, 200, 415, 80, 80); // wx.canvasToTempFilePath({ // canvas: canvas, // fileType: 'jpg', // success(r) { // wx.saveImageToPhotosAlbum({ // filePath: r.tempFilePath, // success(r) { // console.log(r) // }, // fail(r) { // app.toast('保存失败') // } // }) // }, fail(r) { // app.toast('生成失败') // } // }); } })
2023-11-23可以参考下:https://developers.weixin.qq.com/community/develop/article/doc/00026856f8083042d3a0b739a6bc13
Canvas 2D 绘制完再设置高度无效(不支持动态高度)?Canvas组件设置2D后,不能绘制完内容再设置画布高度, 旧版本可以绘制完内容后动态设置高度,在调用draw()方法绘制; 但是设置type="2D" 就不行了
2023-11-23[代码]tip[代码]: Canvas 2D(新接口)需要显式设置画布宽高,默认:[代码]300*150[代码],最大:[代码]1365*1365[代码]1365是没有乘以像素比之前的,如果是乘以3倍,也就是4096了。
基础库版本升级到3.2.2之后,ios canvas画布设置高度超过4096会报错,无法绘制图片问题:将canvas画布的高度超过的4096, 图片无法绘制,报错:MiniProgramError The height 5760 has exceeded the limit 4096. Error: The height 5760 has exceeded the limit 4096,这个现象是从2023.11.21开始的,基础库3.2.2对画布的高度进行强制校验了吗?后续还会优化吗?
2023-11-23[代码]tip[代码]: Canvas 2D(新接口)需要显式设置画布宽高,默认:[代码]300*150[代码],最大:[代码]1365*1365[代码]
canvas-2d高度超过1350苹果手机生成图片空白?海报内容位置尺寸根据设计稿680px为基础宽度计算绘制元素的坐标,为了海报保存清晰度添了放大比例rate,海报内所有x、y、width、height的计算都*rate。因为海报主体展示图片高度不定,所以海报最终高度=图片高度+其他展示区域高度。rate目前是设备宽度/375得出的,大部分机型得出的比例都是1.1以内,海报在安卓和苹果机型上正常;但在iPhone 14 Pro Max上得出rate=1.14后,海报生成的图片就变成空白了,后经多次测试海报总高度超过1350在目前常规可见的苹果手机上生成的图片都是空白。 [图片] 代码片段中我手动设置了rate=1.14,在苹果手机上生成的图片无一列外都是空白;但如果将rate修改为1.13及以下则正常,此问题在安卓正常。【图片宽高:680*960,底部扩展高度:240,海报总高度:(960+240)*1.14=1368】 代码片段地址:https://developers.weixin.qq.com/s/DjCisUmz7vMa
2023-11-23把云函数设置成固定公网IP,然后再加到白名单
小程序云函数调用公众号接口获取token,怎么会有大量不同的IP的地址不在白名单?'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appId + '&secret=' + appSecrect 上面是调用公众号的接口,获取token。在小程序的云函数调用这个接口。 公众号已经把开发者本机IP地址加入到白名单。调试是通过的,能获取到token。 小程序云函数发布后,查看日志,发现有大量的错误,都是40164,但是IP的地址都是不同的, 我也不知道这些IP地址是来自哪里。[图片]
2023-10-22如果只有云开发请参考: https://developers.weixin.qq.com/community/develop/article/doc/000442446203b0840660e18c36b813
小程序和公众号在同一主体下,小程序怎么得到公众号的openid?微信开放平台、小程序、公众号都已经认证,也在微信开放平台进行关联了小程序、公众号,都是在同一个主体下。 小程序发送公众号的模板消息,需要公众号的openid, 现在在云数据库只记录了小程序的openid, 没有记录unionid,也没有记录公众号的openid。 所以,我的问题是: (1)怎么通过小程序的openid得到unionid ? (2)怎么通过unionid得到公众号的openid ?
2023-10-21小程序和公众号绑定到同一微信开放平台账号下,根据unionid来关联同一用户,小程序用户登录就先获取小程序的openid和unionid。 新用户: 一种是使用webview加载公众号网页授权获取公众号openid和unionid; 一种是使用服务器监听公众号用户关注公众号事件来获取公众号的openid和unionid。 老用户: 一种是提醒老用户重新走上述新用户流程; 一种是调用公众号用户列表接口和用户基本信息接口来获取公众号openid和unionid。 如果只有云开发,可参考方案: https://developers.weixin.qq.com/community/develop/article/doc/000442446203b0840660e18c36b813
如何知道小程序人员的openid,想要获取改人员关注公众号的openid,进行公众号模板消息推送?1.023 年 9 月 20 日起(以下简称 “生效期”),下发统一消息接口将被收回,原来使用的是小程序的openid ,给人员推送公众号模板消息,现在要换成公众号模板消息接口,进行推送。 2.想问一下,我如何通过现有的小程序openid 获取公众号的openid呢。获取有什么其他方案,能把两个openid进行统一呢 [图片] [图片]
2023-10-12感觉应该是使用WebSocket来通信的,小程序webview <=> message <=> WebSocket服务器 <=> message <=> web网页,小程序和网页双方根据通信的消息指令来处理业务逻辑。
webview中是否存在实现chooseMessageFile功能的可能?有一个名字为“度慧文档转换”的小程序,我发现他们家的webview可以直接选择微信的消息文件,我看官方文档也没有开发这个接口,请问有人知道这是怎么做到的吗
2023-10-09如果你使用的是云开发发模板消息,可以参考思路: https://developers.weixin.qq.com/community/develop/article/doc/000442446203b0840660e18c36b813
如何解决不使用服务器的情况下配置公众号的IP白名单?原因是我需要在小程序里调用公众号的接口 但是我小程序使用的是云开发 统一下发接口取消后 只能寻找其他方案 但是小程序调用公众号接口需要IP白名单支持 那我又没有服务器 不能为了这个功能单独搞个服务器吧。有没有其他方案 谢谢
2023-09-25如果你使用的是云开发,可以参考思路: https://developers.weixin.qq.com/community/develop/article/doc/000442446203b0840660e18c36b813
公众号消息模板的用户openid要怎么获得呢?现在使用的是小程序的openid,统一下发不能用了[图片] 根据描述已经绑定在一起了,用小程序的openid会报"errcode":40003,"errmsg":"invalid openid rid: 65113fec-0859b11d-0bf0c85f, 看要求是需要公众号的openid,可是这个openid要怎么获得呢?
2023-09-25