小程序 canvas type="2d"
https://img2022.cnblogs.com/blog/1718771/202211/1718771-20221125103030091-1889747023.png
https://img2022.cnblogs.com/blog/1718771/202211/1718771-20221125103220616-1928856538.png
<!-- 标签是在组件当中使用，组件和页面使用是有区别的 -->
<!-- 因为我的canvas不需要展示，下载即可所以使用position:fixed;left:9999px -->
<canvas style="width:{{imgWidth}}px;height:{{imgHeight}};position:fixed;left:9999px" type="2d" id="myCanvas" class="canvas"></canvas>
// 图片描述
// https://img2022.cnblogs.com/blog/1718771/202211/1718771-20221125103030091-1889747023.png
// https://img2022.cnblogs.com/blog/1718771/202211/1718771-20221125103220616-1928856538.png
// 下载静态码 myCanvas是我的背景图片
// 这里的处理，调用this.getQRCodeImg生成二维码图片再绘制背景图片
handleDownload() {
this.getQRCodeImg().then(data=> {
// 注意in(this)在组建当中使用需要这个改变指向
wx.createSelectorQuery().in(this).select('#myCanvas').fields({
node: true,
size: true,
})
.exec( async res=> {
const canvas = res[0].node
const width = res[0].width
this.canvasWidth = width
const height = res[0].height
this.canvasHeight = height
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.clearRect(0, 0, wx.getSystemInfoSync().windowWidth, wx.getSystemInfoSync().windowHeight)
// 可以封装公用方法
const img = canvas.createImage()
img.src = '../../image/back-img.png' // 可以是本地地址也可以是网络地址
let imgHeight = null
wx.getImageInfo({
src:'../../image/back-img.png',
success(res){
// 屏幕宽度/图片宽度 * 图片高度
imgHeight = wx.getSystemInfoSync().windowWidth/res.width * res.height
console.log(res);
}
})
img.onload = () => ctx.drawImage(img, 0, 0, wx.getSystemInfoSync().windowWidth, imgHeight)
// 可以封装公用方法
const codeImg = canvas.createImage()
codeImg.src = data // 可以是本地地址也可以是网络地址
wx.getImageInfo({
src:data,
success(res){
// console.log(res);
}
})
codeImg.onload = () => ctx.drawImage(codeImg, codePosition, 146, 151, 151)
wx.showModal({
title: '提示',
content: '是否下载图片？？',
success: (res)=> {
if (res.confirm) {
wx.canvasToTempFilePath({
canvas: canvas,
success: (res) => {
// console.log(resx.tempFilePath);
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (data) {
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 2000
})
},
fail: function (err) {
},
complete(res) {
wx.hideLoading();
console.log(res);
}
})
},
fail: (ex) => {
console.log(ex);
}
},this);
}
}
})
})
})
},
// 生成图片 staticCode是我的另外一个Canvas它是一个二维码 这个码生成方式不是2d所以使用api还是之前的
getQRCodeImg() {
const ctx = wx.createCanvasContext('staticCode')
return new Promise((resolve,rejects)=> {
setTimeout(() => {
ctx.draw(false, setTimeout(() => {
wx.canvasToTempFilePath({
width: codewidth,
height: codewidth,
canvasId: 'staticCode',
success: res => {
resolve(res.tempFilePath)
},
fail: error => {
rejects(error)
}
}, this)
},300))
}, 200)
})
},
