小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在canvas中使用drawImage
方法绘制图片,有一张被覆盖掉了,各位大佬,有什么方法让两张图片都显示出来,一张覆盖在另一张上
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
textCtx.draw(true)
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
能来个代码片段吗 https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
wx.createSelectorQuery()
.select("#printCanvas")
.fields({ node: true, size: true })
.exec((res) => {
// 获取设备设备像素比
const dpr = wx.getSystemInfoSync();
console.log(dpr);
let textCanvas = res[0].node; // 重点1
textCanvas.width = res[0].width * dpr.pixelRatio;
textCanvas.height = res[0].height * dpr.pixelRatio;
let textCtx = textCanvas.getContext("2d"); // 重点2
var bgImage = textCanvas.createImage();
bgImage.src = "../../pages/image/标签底图.jpg";
var DmCode = textCanvas.createImage();
DmCode.src = "data:image/jpg;base64," + that.data.canvasBase64;
bgImage.onload = () => {
textCtx.drawImage(bgImage, 0, 0,textCanvas.width,textCanvas.height);
};
DmCode.onload = () => {
textCtx.drawImage(DmCode, 600, 280, 100, 100);
});
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
textCtx.draw(true)
能来个代码片段吗 https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
wx.createSelectorQuery()
.select("#printCanvas")
.fields({ node: true, size: true })
.exec((res) => {
// 获取设备设备像素比
const dpr = wx.getSystemInfoSync();
console.log(dpr);
let textCanvas = res[0].node; // 重点1
textCanvas.width = res[0].width * dpr.pixelRatio;
textCanvas.height = res[0].height * dpr.pixelRatio;
let textCtx = textCanvas.getContext("2d"); // 重点2
var bgImage = textCanvas.createImage();
bgImage.src = "../../pages/image/标签底图.jpg";
var DmCode = textCanvas.createImage();
DmCode.src = "data:image/jpg;base64," + that.data.canvasBase64;
bgImage.onload = () => {
textCtx.drawImage(bgImage, 0, 0,textCanvas.width,textCanvas.height);
};
DmCode.onload = () => {
textCtx.drawImage(DmCode, 600, 280, 100, 100);
};
});