一.技术栈
1.画布组件
<canvas style="width: 300px; height: 300px;" canvas-id="firstCanvas"></canvas>
2.js画布绘制对象以及常用方法
CanvasContext wx.createCanvasContext(string canvasId, Object this)
3.获取小程序码，getWXACodeUnlimit，适用于需要的码数量极多的业务场景。通过该接口生成的小程序码，永久有效，数量暂无限制。
实际开发中， 不能使用wx.request（）请求域名https://api.weixin.qq.com
POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
var color = {
r: '247',
g: '218',
b: '0'
}
var paramJson = {
scene: num,
width: 100,
is_hyaline: true,
auto_color: false,
line_color: color
}
var paramString = JSON.stringify(paramJson)
wx.request({
url:
'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' +
_this.access_token,
method: 'POST',
data: paramString, 此处参数不能有{}包起来
responseType: 'arraybuffer',
}）
4.后端 API，access_token 是小程序全局唯一后台接口调用凭据。getAccessToken接口 GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
二.遇到坑的地方
1.this.firstCanvasContext.fillText(_this.nickName, 105, 105)每画一次，如果需要改变文字的颜色和样式，每次都要重新更新。
2.this.firstCanvasContext.drawImage(）的第一个参数，图片路径，参数不能使用base64，可参考链接 微信小程序常见问题
3.可以使用wx.getImageInfo({
src:
// 'https://wx.qlogo.cn/mmopen/vi_32/zq5E68O5DTiccQBEVAJLhEFrQKN6admqDQuLXrJuqXrR9x2ibdO1wpKeicr00BKt5MW0LxJ0ibAAecibH6gmDSqPPsg/132',
'https://yun.wzz1809.com/00005.png',
success(res) {
console.log('getImageInfo成功!')
var tempFilePath = res.path
console.log('tempFilePath:' + tempFilePath)
_this.firstCanvasContext.drawImage(
tempFilePath,
// 'https://yun.wzz1809.com/00005.png',
20,
63,
71,
71
)
_this.firstCanvasContext.draw(true, function() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 300,
destWidth: 300,
destHeight: 300,
canvasId: 'firstCanvas',
fileType: 'png',
success(res) {
console.log(res.tempFilePath)
_this.savePhotoTemp = res.tempFilePath
}
})
})
}
}) 要求图片的域名必须是微信后台配置的合法的downloadFile，可以使用临时路径画图片，必须注意，由于这个接口是异步的，所以后面的draw()必须写在里面，不然将会画不出来
4. wx.request({
responseType: 'arraybuffer',
url:
'https://wx.qlogo.cn/mmopen/vi_32/zq5E68O5DTiccQBEVAJLhEFrQKN6admqDQuLXrJuqXrR9x2ibdO1wpKeicr00BKt5MW0LxJ0ibAAecibH6gmDSqPPsg/132',
success(res) {
console.log('res', res)
var tempFilePath = wx.arrayBufferToBase64(res.data)
console.log('res.data:' + res.data)
console.log('tempFilePath:' + tempFilePath)
_this.base64 = 'data:image/PNG;base64,' + tempFilePath
}
}）
可以将请求的图片转成base64，然后可以通过 <img class="baseImg" :src="base64" /> 渲染出来
5.如果不是小程序，前端仍然可以通过接口的图片二进制文件转成base64，
function transformArrayBufferToBase64 (buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
for (var len = bytes.byteLength, i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
var oReq = new XMLHttpRequest();
oReq.open("get", "http://www.fanji.com/h5/zhjl/pic_jl.php?arry=25&url=123456", true);
oReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
console.log(encodeURIComponent(transformArrayBufferToBase64(oReq.response)));
};
oReq.send();
