需要在微信公众平台,配置downfile域名。
canvas下载海报的问题- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 做这个canvas的功能做了半个月,一直出现bug,现在遇到一个比较特殊的bug 就是我在真机上面测试是没有问题的下载也可以下载到手机相册,但是我把代码上传到体验版就出现了一个bug ,手机打开体验本,[图片]如果没有打开这个调试的,下载到手机的图片就只有文字没有图片。就是这样[图片]但是我把调试打开就行,求助各位大佬呀,欢迎评论给方法,感觉再做不出来这个功能都要离职了。 saveImg: function (e) { var that = this; const ctx = wx.createCanvasContext('secondCanvas'); let path1 = this.data.img1; let path2 = this.data.img2; let path3 = this.data.img3; console.log(path1); console.log(path2); console.log(path3); ctx.rect(0, 0, 650, 910); ctx.fillStyle = "#ffffff";//设置的背景颜色 ctx.fill(); // ctx.fillRect(20, 20, 150, 100);//边框 ctx.drawImage(path1, 20, 20, 335, 180); ctx.drawImage(path2, 140, 238, 100, 90); ctx.setFontSize(12);//设置字体 ctx.fillStyle = "#888888"; ctx.fillText(this.data.tip, 140, 349, 220);//提示 ctx.drawImage(path3, 150, 388, 80, 80); ctx.setFontSize(14);//设置字体 ctx.fillStyle = "#ffa42b"; ctx.fillText(this.data.user_name, 168, 475, 100);//名字 ctx.setFontSize(14);//设置字体 ctx.fillStyle = "#666666"; ctx.fillText(this.data.tuijian, 158, 520, 120);//推荐 ctx.setFontSize(14);//设置字体 ctx.fillStyle = "#333333"; ctx.fillText(this.data.courseInfo.course_name, 108, 540, 220);//课题 // ctx.fillText(this.data.className, 108, 540, 220);//课题 ctx.draw(false, () => { wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片 x: 0, y: 0, destWidth: 375 * 2,//输出图片宽度 destHeight: 663 * 2,//输出图片高度 canvasId: 'secondCanvas', //画布标识 fileType: 'png', //保存的图片格式,默认是png success: function (res) { //接口调用成功的回调函数 console.log(res) console.log(res.tempFilePath); let imgUrl = res.tempFilePath; // if (imgUrl.indexOf("https")==1){ // imgUrl = imgUrl.replace(/^http/,"https") // } if (!res.tempFilePath) { wx.showToast({ title: '图片绘制中,请稍后重试', duration: 1500 }) } // wx.saveImageToPhotosAlbum({ // filePath: res.tempFilePath,//返回的临时文件路径,下载后的文件会存储到一个临时文件 // success: function (res) { // wx.showToast({ // title: '成功保存到相册', // icon: 'success' // }) // } // }) wx.saveImageToPhotosAlbum({ filePath: imgUrl, // 此为图片路径 success: (res) => { console.log(res) wx.showToast({ title: '成功保存到相册', icon: 'success' }) }, fail: (err) => { wx.getSetting({ success(res) { // 进行授权检测,未授权则进行弹层授权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { wx.saveImageToPhotosAlbum({ filePath: imgUrl, // 此为图片路径 success: (res) => { console.log(res) wx.showToast({ title: '成功保存到相册', icon: 'success' }) } }) }, // 拒绝授权时,则进入手机设置页面,可进行授权设置 fail() { wx.openSetting({ success: function (data) { console.log("openSetting success"); }, fail: function (data) { console.log("openSetting fail"); that.toAuthorize() } }); } }) } else { // 已授权则直接进行保存图片 wx.saveImageToPhotosAlbum({ filePath: imgUrl, // 此为图片路径 success: (res) => { console.log(res) wx.showToast({ title: '成功保存到相册', icon: 'success' }) } }) } }, fail(res) { console.log(res); } }) } }) // that.saveImage(imgUrl); // that.saveImageToPhotos(imgUrl); } }) }) }, // 按钮点击触发 clickSave() { this.saveImg(function (res) { this.saveImageToPhotos(res) }) },
2019-06-21