前提:利用qrcode画了一个二维码,需要保存到本地。
思路:用getImageInfo获取图片临时路径,接着画在canvas上。
问题:getImageInfo获取到临时路径(类似http://tmp/xxxx.png格式),使用 ctx.drawImage(img, 0, 0, 200, 200)后,报错,http://tmp/xxx.png 500 (Internal Server Error)。
const query = wx.createSelectorQuery()
query.select('#shareCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
...
const img = canvas.createImage();
img.src = r.path;
img.onload = () => {
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 0;
ctx.fill();
ctx.stroke();
ctx.drawImage(img, 0, 0, 200, 200);
};
})
drawImage 接收的第一个参数是 r.path 吧
const imgInfo = await getImageInfo({ src: baseImg }); this.ctx.drawImage(imgInfo.path, 0, 0, 200, 200, 0, 0, 200, 200)
用canvas生产二维码后用wx.canvasToTempFilePath这个接口保存图片啊
上传个代码片段看看
.exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
console.log(canvas.width, canvas.height);
ctx.scale(dpr, dpr);
ctx.fillStyle = 'red';
// 在canvas上画二维码
const img = canvas.createImage();
ctx.fillRect(0, 0, 200, 300);
img.src = that.data.qrCodeImgs;
img.onload = () => {
ctx.drawImage(img, 0, 0, 200, 200); // 报错接口500
};
// ...
})
},
这是js部分
上面有个人提醒我直接第一步转化成图片,后面就不需要操作了,所以我改了流程,改成qrcode生成二维码+文本,接着canvasToTempFilePath直接转化成图片,这样就没问题了。
最初的那个问题,到现在也没找到原因。