微信Canvas合成两张图片2023最新API

微信Canvas合成两张图片

<canvas id="myCanvas" type="2d" :style="{ width: width+'px', height: height+'px',}" />
    
getImg(){
                var that=this;
                wx.createSelectorQuery()
                    .select('#myCanvas') // 在 WXML 中填入的 id
                    .fields({ node: true, size: true })
                    .exec((res) => {
                            console.log(res);
                        // Canvas 对象
                        const canvas = res[0].node
                        // 渲染上下文
                        const ctx = canvas.getContext('2d')
                
                        // Canvas 画布的实际绘制宽高
                        const width = res[0].width
                        const height = res[0].height
                        that.width=width;
                        that.height=height;
                        // 初始化画布大小
                        const dpr = wx.getWindowInfo().pixelRatio
                        canvas.width = width * dpr
                        canvas.height = height * dpr
                        ctx.scale(dpr, dpr)
                        // 图片对象
                        const image = canvas.createImage()
                        // 图片加载完成回调
                        image.onload = () => {
                            // 将图片绘制到 canvas 上
                              ctx.drawImage(image, 0, 0,300,450)
                        }
                        // 设置图片src
                        image.src = 'https://bing.com/00.jpg'
                        const image2 = canvas.createImage()
                        // 图片加载完成回调
                        image2.onload = () => {
                            // 将图片绘制到 canvas 上
                            ctx.drawImage(image2, 50, 50,100,100)
                            wx.canvasToTempFilePath({
                                canvas,
                                success: res => {
                                    // 生成的图片临时文件路径
                                    const tempFilePath = res.tempFilePath
                                    console.log(tempFilePath);
                                     wx.saveImageToPhotosAlbum({
                                      filePath: tempFilePath,
                                      success(res) {                            
                                        // 修改下载状态                                                          
                                        wx.hideLoading()
                                        wx.showModal({
                                          title: '温馨提示',
                                          content: '图片保存成功，可在相册中查看',
                                          showCancel: false,
                                          success(res) {
                                            
                                          }
                                        })                                                                        
                                      },                                    
                                      fail(res) {
                                        wx.hideLoading()
                                        wx.showModal({
                                          title: '温馨提示',
                                          content: '图片保存失败，请重试',
                                          showCancel: false
                                        })
                                      }
                                    })
                                },
                            })
                        }
                        image2.src = 'https://bing.com/01.jpg'
                    })
                        
            },