<canvas id="shareposter" canvas-id="shareposter"></canvas>
renderImage() {
const ctx = uni.createCanvasContext('shareposter', this);
let drawList = [
{
bg: 'https://q-bwc.oss-cn-shanghai.aliyuncs.com/xcx/static/image/newuser/tg_haibao1.png',
// bg:'https://q-bwc.oss-cn-shanghai.aliyuncs.com/share/tg_haibao1.png',
name: {
x: 50,
y: 237,
fontSize: 14,
color: '#fff'
},
headerImage: {
x: 13,
y: 232,
r: 14
},
qrcode: {
x: 21.5,
y: 287,
w: 92,
h: 92,
r: 10
}
},
{
bg: 'https://q-bwc.oss-cn-shanghai.aliyuncs.com/xcx/static/image/newuser/tg_haibao2.png',
name: {
x: 176,
y: 55,
fontSize: 14,
color: '#fff'
},
headerImage: {
x: 141,
y: 50,
r: 14
},
qrcode: {
x: 219,
y: 218,
w: 81,
h: 81,
r: 10
}
},
{
bg: 'https://q-bwc.oss-cn-shanghai.aliyuncs.com/xcx/static/image/newuser/tg_haibao3.png',
name: {
x: 57,
y: 260,
fontSize: 14,
color: '#fff'
},
headerImage: {
x: 19.5,
y: 253,
r: 16
},
qrcode: {
x: 25,
y: 334,
w: 60,
h: 60,
r: 10
}
}
];
return new Promise(async (resolve, reject) => {
let w = 330;
let h = 428;
ctx.clearRect(0, 0, w, h);
ctx.setFillStyle('rgba(255, 255, 255, 0)');
ctx.fillRect(0, 0, w, h);
// 绘制背景
console.log(1);
ctx.save();
await this.drawImageS(ctx, drawList[0].bg, 0, 0, w, h);
console.log(2);
// 绘制头像
let headerImage = drawList[0].headerImage;
await this.circleImgOne(ctx,'https://thirdwx.qlogo.cn/mmopen/vi_32/VKUdRdM9ib6YYReTuZpQe6gSTK5vDTeqicicKtd8X15o3Q70LCVg5NLjwicjYQJIFXTEEk2L7699ROd9u3nxPESEwQ/132', headerImage.x, headerImage.y, headerImage.r);
let qrCode = drawList[0].qrcode;
console.log(3);
// 绘制文字
let name = drawList[0].name;
ctx.setFontSize(name.fontSize);
ctx.setFillStyle(name.color);
ctx.setTextAlign('left');
ctx.setTextBaseline('top');
ctx.fillText('测试', name.x, name.y);
// 绘制二维码
await this.circleImgTwo(ctx, 'https://q-bwc.oss-cn-shanghai.aliyuncs.com/share/64db45561026f.png', qrCode.x, qrCode.y, qrCode.w, qrCode.h, qrCode.r);
ctx.draw(true, () => {
setTimeout(() => {
console.log('完毕');
resolve(true);
}, 100);
});
});
},
async circleImgOne(ctx, img, x, y, r) {
ctx.save();
ctx.beginPath();
let d = r * 2;
let cx = x + r;
let cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
// ctx.drawImage(img, x, y, d, d);
await this.drawImageS(ctx, img, x, y, d, d);
// ctx.restore();
},
async circleImgTwo(ctx, img, x, y, w, h, r) {
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
ctx.save();
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.closePath();
ctx.clip();
// ctx.drawImage(img, x, y, w, h);
await this.drawImageS(ctx, img, x, y, w, h);
// ctx.restore();
},
drawImageS(ctx, url, x, y, w, h) {
console.log(url);
return new Promise((resolve, reject) => {
uni.downloadFile({
url: url,
success(res) {
console.log(res);
ctx.drawImage(res.tempFilePath, x, y, w, h);
ctx.restore();
setTimeout(() => {
console.log('成功了');
resolve(true);
}, 100);
},
fail(err) {
console.log('失败了');
reject(false);
},
complete() {
console.log('下载晚了');
}
});
});
}
- 发布:2023-09-11 17:06
- 更新:2023-09-11 17:41
- 阅读:397
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win 11
HBuilderX类型: 正式
HBuilderX版本号: 3.8.12
第三方开发者工具版本号: 1.06.2308291
基础库版本号: 3.0.1
项目创建方式: HBuilderX
示例代码:
操作步骤:
直接调用代码绘制即可
直接调用代码绘制即可
预期结果:
所有端正常绘制
所有端正常绘制
实际结果:
安卓端的微信小程序绘制不完整
安卓端的微信小程序绘制不完整
bug描述:
uniapp开发了微信小程序和app,有个分享海报的功能,在app端正常,微信小程序中ios端正常,安卓端部分图片画不出来。
m***@163.com (作者)
在开发工具中以及ios端的微信小程序中都正常绘制。就安卓微笑小程序里有问题
2023-09-11 17:50
DCloud_UNI_LXH
回复 m***@163.com: 使用微信原生试试看,有没有同样的问题
2023-09-11 18:00
m***@163.com (作者)
回复 DCloud_UNI_LXH:今天使用了微信的绘图api,现在正常了,微信那边已经抛弃旧版本api了。采用新的api。uniapp这边应该是还没兼容到
2023-09-12 11:08
DCloud_UNI_LXH
回复 m***@163.com: 应该是可以直接使用的
2023-09-13 16:29