微信小程序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.jsconst 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)      }    })  },