小程序canvas 绘制海报

最新推荐文章于 2024-07-25 08:58:13 发布

偷懒de程序员

最新推荐文章于 2024-07-25 08:58:13 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏： js 微信小程序分享文章标签：小程序 javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45474673/article/details/125222777

js 同时被 2 个专栏收录

10 篇文章

订阅专栏

微信小程序分享

4 篇文章

订阅专栏

这段代码展示了如何在微信小程序中利用wx.createSelectorQuery获取canvas元素，并结合getImageInfo方法绘制多个图像，包括背景图、内容背景、头像、文本等。最后，将canvas转换为临时文件路径并保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更新API后的操作

html

<canvas type="2d" id='myCanvas' style="width: 375px;height: 667px;"></canvas>

js代码

  createNewImg: function () {
    var that = this;
    wx.createSelectorQuery()
      .select('#myCanvas')
      .fields({ node: true, size: true })
      .exec( async res => {
        // 获取尺寸单位
        const dpr = wx.getSystemInfoSync().pixelRatio
        // 获取canvas 对象
        let textCanvas = res[0].node
        // 设置宽高
        textCanvas.width = res[0].width * dpr
        textCanvas.height = res[0].height * dpr
        // 创建一个2d canvas对象
        const context = textCanvas.getContext('2d')
         //清空画板
        context.clearRect(0, 0, 320, 410);
        // 缩放
        context.scale(dpr, dpr)
        // 背景色
        // context.globalAlpha = '0'
        context.fillStyle = '#fff';
        // 填充矩形宽高
        // context.fillRect(0, 0, 375, 567)
        
        // 绘制背景图
        const bg = textCanvas.createImage()
        bg.src = "/assets/image/party_development/share_bg.png";
        let shareBg = await new Promise((resolve, reject) => {
          bg.onload = () => resolve(bg)
          bg.onerror = (e) => reject(e)
        });
        context.drawImage(shareBg, 24, 56, 325, 520);
        // 绘制内容背景图
        let content = textCanvas.createImage()
        content.src='/assets/image/party_development/share_center.png'
        let content_bg = await new Promise((resolve, reject) => {
          content.onload = () =>  resolve(content)
          content.onerror = (e) => reject(e)
        })
        context.drawImage(content_bg, 54, 220, 261, 243);
        // 绘制个人信息头像
        let avatar = textCanvas.createImage()
        avatar.src='/assets/image/avatar.png'
        let avatar_image = await new Promise ((resolve, reject) => {
          avatar.onload = () => resolve(avatar)
          avatar.onerror = (e) => reject(e)
        })
        context.drawImage(avatar_image, 74, 230,46,44)
        // 绘制个人信息
        context.font = '15px bold ';
        context.fillStyle = '#010F37';
        context.fillText("张三", 130, 247);
        context.font = '14px normal'
        context.fillStyle = '#60676D'
        context.fillText("邀您一起", 130, 267);
        // 绘制活动内容
        let activity = textCanvas.createImage()
        activity.src='/assets/image/test.png'
        let activity_image = await new Promise ((resolve, reject) => {
          activity.onload = () => resolve(activity)
          activity.onerror = (e) => reject(e)
        })
        context.drawImage(activity_image, 64, 300, 240, 116)
        context.font = '14px normal'
        context.fillStyle = '#010F37'
        context.fillText("活动标题", 74, 444);
        // 绘制小程序二维码
        let wx_info = textCanvas.createImage()
        wx_info.src='/assets/image/party_development/wx_bg.png'
        let wx_bg = await new Promise ((resolve, reject) =>{
          wx_info.onload = () => resolve(wx_info)
          wx_info.onerror = (e) => reject(e)
        })
        context.drawImage(wx_bg, 54, 486, 261, 71)
        context.font = '14px normal'
        context.fillStyle = '#4574FF'
        context.fillText("长按识别二维码  >>", 74, 527);
        let code = textCanvas.createImage()
        code.src = '/assets/image/party_development/ewm.jpg'
        let code_image = await new Promise ((resolve, reject) =>{
          code.onload = () => resolve(code)
          code.onerror = (e) => reject(e)
        })
        context.drawImage(code_image,240, 492, 60, 60)
        //将生成好的图片保存到本地
        setTimeout(function () {
          wx.canvasToTempFilePath({
            canvas: textCanvas,
            success: function (res) {
              var tempFilePath = res.tempFilePath;
              that.setData({
                imagePath: tempFilePath,
                canvasHidden: true
              });
            },
            fail: function (res) {
    
            }
          });
        }, 200);
      })
  },