//绘制二维码 this .userImage = wx.createImage(); //创建图片对象 this .shareBtn.onTap((res)=>{ //------------------------------------------------------------------------------- this .ctx.save(); //保存canvas上下文,因为canvas设置之后会影响到之后所有的图片裁剪 this .ctx.beginPath(); //开始绘制 this .ctx.arc( this .datastore.canvas.width / 2, this .datastore.canvas.height / 4, this .datastore.canvas.width / 10, 0, 2 * Math.PI); this .ctx.closePath(); //结束绘制 this .ctx.clip(); //执行裁剪 //-------------------------------------------------------------------------------- this .userName = res.userInfo.nickName; //在canvas上绘制用户头像 this .userImage.src = res.userInfo.avatarUrl; this .isShare = true ; //用户点击了确认 this .userImage.onload = () => { this .ctx.drawImage( this .userImage,0,0, this .userImage.width, this .userImage.height, this .datastore.canvas.width * 2 / 5, ( this .datastore.canvas.height / 4 - this .datastore.canvas.width / 10), this .datastore.canvas.width / 5, this .datastore.canvas.width / 5); //绘制图片 this .ctx.restore(); //绘制二维码 const sanya_img = this .datastore.res.get( 'sanya' ); this .ctx.drawImage( sanya_img, //获取图片对象 0, 0, sanya_img.width, sanya_img.height, this .datastore.canvas.width - sanya_img.width, this .datastore.canvas.height - sanya_img.height, sanya_img.width, sanya_img.height ); } //隐藏“分享”按钮 if ( this .isShare) { this .shareBtn.hide(); } else { this .shareBtn.show(); } }); |
以上代码逻辑:
绘制背景图片(正常显示)
点击获取用户信息绘制圆形图片——显示头像(正常显示),但是无法显示背景图片了。
PS:在微信开发者工具上能正常显示背景图片和头像,但是在真机上只能显示头像
请问下这是什么原因????
以下是开发工具与真机效果对比
大神解决了吗 也遇到了开发者工具上显示图片真机不显示 我用的是IOS调试的
找到一个方法 试一试
https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=&docid=44d3cbf02497526ccd8d6c9a4ef9cfb5
我的情况和你的不一样,我用的是本地图片资源且第一次能绘制后面为了显示头像将显示形状改为圆形。然后就显示不了背景图片了。目前没有解决
我也是,本地图片没法再真机上显示,请问你解决了吗
你这个有点击小程序码,弹出扫描小程序码的菜单吗
没有加扫码API,不过你可以保存图片长按识别图中二维码就行。还有就是二维码太小扫描识别不了(需要注意)