最近做小程序有个需求是将文字信息生成图片保存到本地，在PC端模拟器，图片的地址是
可以正常保存，不报错
但是到了真机的时候就报错，并且图片地址也发生改变
解决办法：
先将图片上传到服务器util.uploadFileUrl，然后再调用wx.downloadFile方法
<button class="printInfo-btn" bindtap="handleSave">保存</button><canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px' canvas-id='myCanvas'></canvas>
const util = require('../../utils/util.js')const ctx = wx.createCanvasContext('myCanvas')var leftMargin = "" //文字距离左边边距var topMargin = "" //文字距离右边边距Page({data:{showPrintInfo: false, //打印信息弹框是否显示title: '订单信息',serveContent: '', //修复项目salary: '', //订单信息--地址rtype: '', //订单信息--姓名rmoney: '', //订单信息--手机号orderTime: '', //订单信息--下单时间cleanTime: '', //订单信息--清洗完成时间canvasWidth: '', // canvas宽度canvasHeight: '', // canvas高度hotline: '服务热线：17333937526', //服务热线}// 点击打印按钮，弹出弹出层handlePrintShow() {this.setData({showPrintInfo: true})this.addImage()},// 点击保存按钮，保存到本地相册handleSave() {let _this = this;//获取相册授权wx.getSetting({success(res) {if (!res.authSetting['scope.writePhotosAlbum']) {wx.authorize({scope: 'scope.writePhotosAlbum',success() {_this.tempFilePath()}})} else {_this.tempFilePath()}}})},img(imgSrc) {let _this = thisvar imgSrc = imgSrcutil.uploadFileUrl(imgSrc, function (r) {wx.downloadFile({url:r,success(res) {wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success() {wx.showToast({title: '保存成功',duration: 2000})_this.setData({showPrintInfo: false})},fail(err) {console.log(err);if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {wx.openSetting({success(settingdata) {console.log(settingdata)if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.showToast({title: '图片已保存',icon: 'none',duration: 2000})console.log('获取权限成功，给出再次点击图片保存到相册的提示。')} else {console.log('获取权限失败，给出不给权限就无法正常使用的提示')}}})}}})},fail(err) {console.log(err);}})})},//画背景图addImage() {var context = wx.createContext();var path = "../../components/images/share.png";//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片//不知道是什么原因，手机环境能正常显示ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight)this.addTitle()this.addRtype()this.addRmoney()this.addorderTime()this.addcleanTime()this.addSalary()this.addserveContent()this.addhotline()ctx.draw()},//画标题addTitle() {var str = this.data.titlectx.font = 'normal normal 16px sans-serif';ctx.setTextAlign('center'); // 文字居中ctx.setFillStyle("#222222");ctx.fillText(str, this.data.canvasWidth / 2, 30)},// 画姓名addRtype() {var str = this.data.rtypectx.setFontSize(14)ctx.setFillStyle("#222");ctx.setTextAlign('left');ctx.fillText(str, this.data.canvasWidth / 8, topMargin * 0.20)},// 画电话addRmoney() {var str = this.data.rmoneyctx.setFontSize(14)ctx.setFillStyle("#222");ctx.setTextAlign('left')ctx.fillText(str, this.data.canvasWidth / 8, topMargin * 0.30)},// 画地址addSalary() {var str = this.data.salarythis.handleLineBreak(ctx, str, 0.40, 14)},//画下单时间addorderTime() {var str = this.data.orderTimectx.setFontSize(14)ctx.setFillStyle("#222");ctx.setTextAlign('left');ctx.fillText(str, this.data.canvasWidth / 8, topMargin * 0.55)},//画清洗完成时间addcleanTime() {var str = this.data.cleanTimectx.setFontSize(14)ctx.setFillStyle("#222");ctx.setTextAlign('left');ctx.fillText(str, this.data.canvasWidth / 8, topMargin * 0.65)},// 画修复项目addserveContent() {var str = this.data.serveContentthis.handleLineBreak(ctx, str, 0.75, 14)},// 画服务热线addhotline() {var str = this.data.hotlinectx.setFontSize(14)ctx.setFillStyle("#222");ctx.setTextAlign('left');ctx.fillText(str, this.data.canvasWidth / 8, topMargin * 0.90)},//导出图片tempFilePath() {let _this = this;wx.canvasToTempFilePath({canvasId: 'myCanvas',success(res) {_this.img(res.tempFilePath)}});},/*** 生命周期函数--监听页面初次渲染完成*/// canvas 换行handleLineBreak(ctx, text, num, fontSize) {var text = textctx.setFontSize(fontSize)ctx.setFillStyle("#222")ctx.setTextAlign('left')var chr = text.split("") //这个方法是将一个字符串分割成字符串数组var temp = ""var row = []for (var a = 0; a < chr.length; a++) {if (ctx.measureText(temp).width < 300) {temp += chr[a]} else {a-- //这里添加了a-- 是为了防止字符丢失，效果图中有对比row.push(temp)temp = ""}}row.push(temp);//如果数组长度大于3 则截取前3个if (row.length > 3) {var rowCut = row.slice(0, 3);var rowPart = rowCut[2];var test = "";var empty = [];for (var a = 0; a < rowPart.length; a++) {if (ctx.measureText(test).width < 300) {test += rowPart[a];} else {break;}}empty.push(test);var group = empty[0] + "..." //这里只显示3行，超出的用...表示rowCut.splice(1, 1, group);row = rowCut;}for (var b = 0; b < row.length; b++) {ctx.fillText(row[b], this.data.canvasWidth / 8, topMargin * num + b * 20, 700)}},onLoad(options) {// 模拟code码if (options.code) {this.setData({code: options.code})} else {console.log("no scene");}this.queryCleanOrder()let _this = thiswx.getSystemInfo({success(res) {_this.setData({//设置宽为屏幕宽，高为屏幕高的80%，因为文档比例为5:4canvasWidth: res.windowWidth,canvasHeight: res.windowWidth * 0.8})leftMargin = res.windowWidthtopMargin = res.windowWidth * 0.8},})}})
小程序canvas文字信息绘制图片 模拟器正常保存图片 真机无法保存图片报错downloadFile:fail downloadFile protocol must be http or https
