思路:
1.取到canvas(600rpx)在小程序自适应的真实宽度,和标准宽度(300px)进行计算,获得放大或缩小的比例
2.绘图中数值 * 比例,得出放大或缩小的真实数值
let w = 0 // 画布宽度
let h = 0 // 画布宽度
// 获取canvas标签
let ctx = wx.createCanvasContext('customCanvas')
// 获取canvas尺寸
let query = wx.createSelectorQuery()
query.select('#share').boundingClientRect()
query.exec(function (rect) {
let res = rect[0]
w = res.width
h = res.height
let baseNum = 300 // 标准画布宽度基数
let ratio = w / baseNum // 自适应比例
console.log('绘图开始')
ctx.setFillStyle('#fff') // 背景颜色
ctx.fillRect(0, 0, w, h)
let img = {
type: 'img',
url: '图片链接'
}
let qrImg = {
type: 'qrimg',
url: '二维码链接'
}
// 图片统一转为本地图片
let imgArr = [img, qrImg]
let num = 0 // 转为本地图片数量
// 将图片转为临时图片
imgArr.map((value, key) => {
wx.getImageInfo({
src: value.url,
success: function (res) {
num++
let path = res.path
if (value.type == 'img') {
img.url = path
}
if (value.type == 'qrimg') {
qrImg.url = path
}
// 全部图片都转为临时图片后,继续绘图
if (num == imgArr.length) {
// 绘图内容
ctx.drawImage(img.url, 0, 0, w, w)
// 二维码
ctx.drawImage(qrImg.url, 209 * ratio, 314 * ratio, 72 * ratio, 72 * ratio)
// 。。。中间代码省略
ctx.draw(true, setTimeout(function () { // 加定时器是防止绘图未完成就生成图片导致图片内容不完整
// 生成本地图片
wx.canvasToTempFilePath({
x: 0, y: 0,
canvasId: 'customCanvas',
success: function (res) {
let path = res.tempFilePath
console.log(path)
},
fail: function (res) { }
})
}, 0))
}
}
})
})
})
效果图