微信小程序canvas.drawImage方法无法加载网络图片解决方法
项目需求
对后台返回数据动态生成海报，可保存到手机相册。
网上大多的方法都是调用getImageInfo方法转本地图片
wx.getImageInfo({
src: 'http://www.域名.com/w.jpg',
success: function (res) {
context.drawImage(res.path, 0, 0, that.data.imagewidth, that.data.imageheight);
context.draw();
})但是需要对其中的src域名需要在服务器域名的downloadFile合法域名中报备
结果配置了报错 downloadFile:fail 发生了 SSL 错误,无法建立与该服务器的安全连接。
主要是因为使用的sever2008 IIS7 默认使用的SSL2.0，而iOS微信需要使用TLS 1.2。
只要修改一下，启用server 2008 的TLS 1.2就可以了。
http://www.simapple.com/418.html
我们经理因某些原因不想修改服务器，所以提供了一个图片转base64接口给我进行适配
下面上代码
//base64.js
const fsm = wx.getFileSystemManager();
const requestUtil = require('request.js');
const app = getApp();
const basepath = `${wx.env.USER_DATA_PATH}`
//网络图片转base64转本地
function base64src(onlineSrc, cb) {
var FILE_BASE_NAME = 'tmp_base64src_' + Math.ceil(Math.random() * 10000); //自定义文件名
requestUtil.httpRequest({
url: app.globalData.hostName + 'api/Url2Base64',
method: 'GET',
data: {
imgUrl: onlineSrc,
},
success: (res) => {
if (res.data.ResultCode == '0') {
var base64data = res.data.ResultData;
if (base64data) {
base64data = JSON.stringify(base64data)
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if (!format) {
return (new Error('ERROR_BASE64SRC_PARSE'));
}
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
const buffer = wx.base64ToArrayBuffer(bodyData);
fsm.writeFile({
filePath,
data: buffer,
encoding: 'binary',
success() {
cb(filePath);
},
fail(res) {
console.log(res)
wx.hideLoading();
wx.showToast({
title: '正在清理缓存，请稍后...',
icon: 'none',
})
//清理缓存
fsm.readdir({
dirPath: basepath, /// 获取文件列表
success(res) {
console.log(res)
res.files.forEach((val) => { // 遍历文件列表里的数据
console.log(val)
fsm.unlink({
filePath: basepath + '/' + val
});
})
},
fail(err) {
console.log(err)
},
complete() {
setTimeout(() => {
wx.navigateBack({
delta: 1
})
}, 1500)
console.log('complete')
}
})
return (new Error('ERROR_BASE64SRC_WRITE'));
},
});
}
}
}
});
};
export {
base64src
}//对应的页面.JS引入
import {
base64src
} from '../../../utils/base64.js'
//调用
//网络图片转base64转本地
base64src(that.data.posterPath, res => {
that.setData({
posterPath: res
})
that.createQR();
});
转完base64后需要将其转为本地文件，利用writeFile可以实现。
但是用writeFile有一个问题，就是缓存到本地的图片没有及时得到清除，空间不足会导致报错（貌似是限制10M缓存）
writeFile:fail the maximum size of the file storage limit is exceeded
所以我们在调用的方法里面加入了清除缓存的代码
//清理缓存
fsm.readdir({
dirPath: basepath, /// 获取文件列表
success(res) {
console.log(res)
res.files.forEach((val) => { // 遍历文件列表里的数据
console.log(val)
fsm.unlink({
filePath: basepath + '/' + val
});
})
},
fail(err) {
console.log(err)
},
complete() {
setTimeout(() => {
wx.navigateBack({
delta: 1
})
}, 1500)
console.log('complete')
}
})参考自
https://developers.weixin.qq.com/community/develop/doc/000ac4b8fd83d813e98806ef853400?highline=writeFile%3Afail%20the%20maximum%20size%20of%20the%20f
另外还有一个安卓canvasToTempFilePath生成二维码显示不全的问题
使用的是weapp.qrcode.esm.js
需要给canvasToTempFilePath加上个延时即可
createQR: function() {
let that = this;
var url = that.data.qrcodeUrl;
drawQrcode({
width: 120,
height: 120,
canvasId: 'myQrcode',
correctLevel: 0,
// ctx: wx.createCanvasContext('myQrcode'),
text: url,
// v1.0.0+版本支持在二维码上绘制图片
image: {
//二维码上的图标
// imageResource: '/img/posterTest/qrcodeIcon.jpg',
dx: 44,
dy: 44,
dWidth: 36,
dHeight: 36
},
callback: function(e) {
setTimeout(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 120,
height: 120,
destWidth: 120,
destHeight: 120,
canvasId: 'myQrcode',
success: function(res) {
that.data.qrcodeImg = res.tempFilePath;
that.createNewImg();
}
})
}, 200)
}
})
},总结
整体把功能做下来还是比较麻烦，代码也累赘，很多问题是百度找不到，需要自己摸索，微信小程序相关的文件可以先先到微信小程序社区找一下有没相关，会有意外惊喜
https://developers.weixin.qq.com/