小程序canvas文字信息绘制图片，模拟器正常保存图片，真机无法保存图片报错downloadFile:fail downloadFile protocol must be http or https

最近做小程序有个需求是将文字信息生成图片保存到本地，在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相关推荐

微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
小程序canvas商品海报绘制
小程序canvas海报绘制 1.html 绘制图片的元素 <view class="canvas-box"><canvas style="width: ...
微信小程序报错：“该小程序提供的服务出现故障，请稍后再试”（IOS报错，Android则正常）
记录对接微信小程序时遇到的问题,问题表现为: 1.发送消息后出现报错:该小程序提供的服务出现故障,请稍后再试 2.只有IOS会报错,Android则是正常的 3.IOS报错的微信号,即使在电脑端登录, ...
[已解决]微信小程序 canvas 文字样式错乱问题
在微信小程序中使用canvas绘制海报的时候,发现有多种不同的样式文字时, 保存canvas内容为图片,出现各种文字样式错乱. ------------------------------------ ...
java drawimage图片不完整_微信小程序canvas.drawImage完全显示图片问题的解决
问题描述问题产生对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的导入初始项目打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工 ...
微信小程序使用html2canvas,微信小程序canvas 2d 引入本地图片并生成分享图
在小程序基础库 v2.9.0 正式开放一套全新的 Canvas 接口.该接口符合 HTML Canvas 2D 的标准,实现上采用 GPU 硬件加速,渲染性能相比于现有的 Canvas 接口有一倍左右 ...
微信小程序canvas画布转成图片并在转发里面形成图片转发
onReady() {var that = thisvar rpx = wx.getSystemInfoSync().windowWidth / 375; //加入rpx进行手机适配const que ...
微信小程序分享到朋友圈-遇到的问题drawImage真机不显示网络图片
网上有现成的例子,所以直接拿来用了,见链接,接下来说下自己遇到的问题 -> 因为在我的项目中,我的图片是网络图片,canvas上绘制的目前只支持本地图片,那应该怎么办呢?不可能图 ...
微信小程序 canvas 文字自动换行
Page({drawCanvas: function(ctx) {// 地址ctx.setFontSize(14)ctx.setFillStyle('#9E7240')ctx.textAlign=&q ...

小程序canvas文字信息绘制图片，模拟器正常保存图片，真机无法保存图片报错downloadFile:fail downloadFile protocol must be http or https

小程序canvas文字信息绘制图片，模拟器正常保存图片，真机无法保存图片报错downloadFile:fail downloadFile protocol must be http or https相关推荐

最新文章

热门文章