详细问题描述
在ios端 - 微信浏览器
如果读取本地缓存绘制出canvas再调用uni.canvasToTempFilePath,此方法不会触发,success,fail,complete三个回调都不会触发;
如果不读取本地缓存使用默认图片和文字,直接绘制canvas,该方法success,fail,complete三个回调都可以触发;
在Android端 - 微信浏览器
无问题
[内容]
测试版将支付0.01
重现步骤
1.首页获取微信授权,将头像 昵称 本地缓存
- 海报页面直接读取即可复现
[读取代码]
[App安装包或H5地址]
[可重现代码片段]
qrR(path) {
this.src = path
let that = this
let system_info = uni.getSystemInfoSync();
console.log(system_info)
let ctx = uni.createCanvasContext('firstCanvas');
uni.getImageInfo({
src: that.cover,
success(res) {
console.log(res);
// ctx.drawImage(res.path, 0, 0, 375, uni.upx2px(1334));
ctx.drawImage(res.path, 0, 0, uni.upx2px(750), uni.upx2px(1334));
/*二维码开始 - start*/
ctx.fillStyle = '#FFFFFF';
//刻画二维码背景 - 白色
ctx.fillRect(uni.upx2px(42), uni.upx2px(1074), uni.upx2px(233), uni.upx2px(233));
//刻画二维码图片
ctx.drawImage(path, uni.upx2px(67), uni.upx2px(1094), uni.upx2px(183), uni.upx2px(183));
//刻画二维码文字说明
ctx.font = '13px Arial';
ctx.fillStyle = '#000';
ctx.fillText('长按保存海报', uni.upx2px(75), uni.upx2px(1300));
/*二维码结束 -end*/
/* 刻画人物头像 -start*/
ctx.save()//裁切前 保存画布状态
let tx_x = uni.upx2px(65) //头像x坐标
let tx_y = uni.upx2px(179)//头像y坐标
let cricle_r = uni.upx2px(54)//圆的半径
let cricle_x = tx_x + cricle_r//圆中心点 X
let cricle_y = tx_y + cricle_r//圆中心点 Y
ctx.beginPath();//开始画圆
ctx.arc(cricle_x,cricle_y,cricle_r,0,2*Math.PI);
ctx.clip();//裁切
// console.log(that.headimgurl)
ctx.drawImage(that.headimgurl,tx_x, tx_y,cricle_r*2,cricle_r*2);//开始画头像
ctx.restore() //恢复画布不被裁切
ctx.save()//裁切前 保存画布状态
let nickname_x =tx_x + cricle_r*2 +9
let nickname_y =tx_y + cricle_r
ctx.font = '18px Arial';//刻画nickname
ctx.fillStyle = '#fff';
ctx.fillText(that.nickname, nickname_x, nickname_y+9);
ctx.restore() //恢复画布不被裁切
/*刻画人物头像 -end */
let scale = 2//为了增加图片清晰度,放大系数
ctx.draw(false, () => {
// alert('draw')
uni.canvasToTempFilePath({
x: 0,
y: 0,
width:uni.upx2px(750),
height: uni.upx2px(1334),
destWidth: uni.upx2px(750)*scale,
destHeight: uni.upx2px(1334)*scale,
canvasId: 'firstCanvas',
quality:1,
success: function(res) {
console.log(res)
that.test_src = res.tempFilePath
// alert('that.test_src')
// uni.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// success: function() {
// console.log('save success');
// }
// });
},
fail(e) {
console.log(e);
// alert('a')
uni.showToast({
title: '生成海报失败',
icon: 'none'
});
},
complete(e){
// alert('测试ios是否调用方法')
}
});
});
},
fail(error) {
console.log(error);
}
});
},
联系方式
[QQ]
350839123
zzzzzzhen
大哥请问解决了吗我也遇到了
2020-07-09 15:16