- 小程序安卓端打开canvas显示空白,ios都可以正常显示,请问是什么问题?
[图片][图片] [图片][图片]
2023-09-23 - 小程序安卓手机打开不显示canvas?ios都可以,后台域名都配置了
//换成本地路径 getGoodsImgPath() { return new Promise((success, fail) => { if (this.imgSrc != '') { success(this.imgUrl); } else { wx.getImageInfo({ src: this.imgUrl, success: res => { this.imgSrc = res.path success(res.path); }, fail: res => { this.imgSrc = res.path } }) } }); }, 获取 access_token getAccessToken() { this.$http({ url: this.$url.appInfo, methods: 'post', data: { token: uni.getStorageSync('token') } }).then(res => { uni.request({ method: "GET", url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${res.data.appid}&secret=${res.data.secret}`, success: (result) => { let access_token = result.data.access_token // 获取到 access_token 后 获取二维码 this.getQrCode(access_token) } }) }) }, // 获取二维码 getQrCode(token) { // 注意 access_token 参数是必须放在url后面 其余参数 要在data里面 let path = 'pagesB/register/register' let mobile = uni.getStorageSync('mobile') uni.request({ method: "POST", responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64 url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`, data: { page: path, // 需要打开的页面路径 scene: mobile // 这个是需要传递的参数 }, success: (result) => { // 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示 // 如果不加请求时 responseType: 'arraybuffer' 则会转码失败 this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data); this.getGoodsImgPath().then(res => { this.saveAlbum(res) }) }, }) }, //把二维码制作在背景图片中 saveAlbum(res) { //获取权限保存相册 var base64url = this.bufferImg; //base64图片 console.log(base64url, '二维码') var imgPath = wx.env.USER_DATA_PATH + '/invite' + 'dalaba' + '.png'; //创建名为invite的本地文件 var imageData = base64url.replace(/^data:image\/\w+;base64,/, ""); //清除base64前缀 var fs = wx.getFileSystemManager(); //获得文件系统管理器 用于操作临时文件 // console.log(imgPath) fs.writeFileSync(imgPath, imageData, "base64"); //文件路径 存入内容 编码格式 可以直接使用imgPath来进行操作 //背景图片路径 // let img = uni.getStorageSync('imageCache') // console.log(res, '我是图片') let backurl = '../../static/images/1.png' //设置背景图片和二维码的宽度和高度 uni.getSystemInfo({ success: (res) => { console.log(backurl, imgPath, '地址') var windowWidth = res.windowWidth; //宽 var windowHeight = res.windowHeight; //高 const ctx = wx.createCanvasContext('myCanvas', this); //拿到canvas的id ctx.drawImage(backurl, 0, 0, windowWidth, windowHeight); //背景图 ctx.drawImage(imgPath, 15, 300, 65, 65); //二维码 ctx.draw(false, setTimeout(() => { wx.canvasToTempFilePath({ //把画布转化成临时文件进行保存 width: this.windowWidth * 1.22, // 截取的画布的宽 height: this.windowHeight * 1.22, // 截取的画布的高 destWidth: this.windowWidth * 1.22 * 3, // 保存成的画布宽度 destHeight: this.windowHeight * 1.22 * 3, // 保存成的画布高度 // width: 50, // 截取的画布的宽 // height: 50, // 截取的画布的高 // destWidth: 100, // 保存成的画布宽度 // destHeight: 100, // 保存成的画布高度 fileType: 'png', // 保存成的文件类型 quality: 1, // 图片质量 canvasId: 'myCanvas', // 画布ID success: (res) => { this.tempFilePath = res.tempFilePath }, fail() { uni.showToast({ title: '保存失败,稍后再试', duration: 2000, icon: 'none' }) } }) }, 2000)) //调用画布绘制 } }) }, //点击保存图片 saveImage() { uni.getSetting({ //获取用户的当前设置 success: (res) => { // console.log("获取权限",res); if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册 this.share(); } else { uni.authorize({ //如果没有授权,向用户发起请求 scope: 'scope.writePhotosAlbum', success: () => { this.share(); }, fail: () => { uni.showToast({ title: "请打开保存相册权限,再点击保存相册分享", icon: "none", duration: 3000 }); setTimeout(() => { uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册 success: (res2) => { // console.log(res2.authSetting) } }); }, 3000); } }) } } }) }, //分享给朋友 share() { wx.showShareImageMenu({ path: this.tempFilePath, success: (res) => { uni.showToast({ title: '图片保存成功~', duration: 2000 }) }, fail: (err) => { uni.showToast({ title: '图片保存失败~', icon: 'error', duration: 2000 }) }, }) },
2023-09-23