绘制图片要在onload里画, // 省略上面初始化步骤,已经获取到 canvas 对象和 ctx 渲染上下文 // 图片对象 const image = canvas.createImage() // 图片加载完成回调 image.onload = () => { // 将图片绘制到 canvas 上 ctx.drawImage(image, 0, 0) } // 设置图片src image.src = 'https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png'
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-01等
用户协议更新后不生效?获取用户昵称报错 showNicknameAccessory:fail api scope is not declared in the privacy agreement,更新用户协议后,依然报同样的错误,需要重新发布代码吗?
2023-10-31去找人工客服试试
小程序二次申诉失败后,如何再次申诉?大神们好,小程序二次申诉失败后,按照违规文档的案例已经重新整改(由强制授权地理位置改为自愿授权地理位置)代码提交并且审核通过了,但用户地理位置授权没有解封,求大神们指导如何再次申诉
2023-10-31去配置隐私协议
[严重BUG]今天老用户可以正常访问,新用户点击授权,没有任何反应,模拟器正常。[严重BUG]今天老用户可以正常访问,新用户点击授权,没有任何反应,模拟器正常。
2023-10-31等
最近更新了隐私协议,为什么还是getUserProfile还是112?最近更新的隐私协议开发,低版本需要适配getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize 这些接口吗?
2023-10-31https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html
小程序图片框无法上传, 图片框点不动[图片]
2023-10-31继续等
今天获取头像和昵称突然报错,隐私协议更新后,等了10分钟,获取头像和昵称还是报错,为什么?获取昵称提示:showNicknameAccessory:fail api scope is not declared in the privacy agreement, errno:112 获取头像提示:chooseAvatar:fail api scope is not declared in the privacy agreement 用户隐私指引也更新了 [图片] 为什么还不行
2023-10-31等
已配置更新隐私指引 报错112?已配置更新隐私指引 Object {errMsg:"chooselmage:fail api scope.errMsg: "chooselmage:fail api scope is not declared inthe privacy agreementerrno. 112[图片]
2023-10-31继续等吧
现网小程序登录失效,在小程序管理界面-设置-更新用户隐私协议,现网的小程序登录还没恢复?现网小程序登录失效,在小程序管理界面-设置-更新用户隐私协议,现网的小程序登录还没恢复?已经过了1个小时,难道需要小程序重新发版吗? 小程序的基础版本库是 2.33,更新完用户隐私协议会影响到后续的地位位置授权吗?
2023-10-31等几个钟
小程序隐私协议添加了收集位置信息等,但是使用选择地址等接口还是提示没有在隐私协议中声明,报错112?wx.chooseLocation、wx.chooseImage两个接口都是隐私协议添加了选项并且通过审核,但是线上还是无法使用,小程序基础库3.1.1,微信版本号8.0.43。请问是什么原因,求大神解答一下
2023-10-31