小程序使用canvas制作beas64图片

最新推荐文章于 2024-07-22 18:18:11 发布

&ACE&

最新推荐文章于 2024-07-22 18:18:11 发布

阅读量247

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_59525879/article/details/132778909

版权

1设置一个canvas标签

   <canvas style="width: 300px; height: 450px;" id="Canvase" type="2d" ></canvas>

2获取接口数据的图片数据

  wx.request({
      url: '接口地址', //仅为示例，并非真实的接口地址
      data: {
        请求参数
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
      console.log(res);
      
        
       
      }
    })

2在成功回调中写入

const fs = wx.getFileSystemManager();
var codeimg = wx.env.USER_DATA_PATH + '/' + '.jpg';
fs.writeFile({
  filePath: codeimg,
  data: res.data.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)
  encoding: 'base64',
  success: () => {
    // console.log(codeimg);

    wx.createSelectorQuery().select('#Canvase').fields({
      node: true,
      size: true
    })
      .exec((res) => {
        console.log(res);
        let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文              
        let canvas = res[0].node;
        const bg = canvas.createImage();
          //背景图片
        const image = canvas.createImage();
          // 图片高清化
        const dpr = wx.getSystemInfoSync().pixelRatio;
        res[0].node.width = res[0].node.width * dpr;
        res[0].node.height = res[0].node.height * dpr;
        // 设置背景图片src
        image.src = '背景图片地址'
        bg.src = codeimg;
        image.onload = function () {
          ctx.drawImage(image, 0, 0, 900, 440)
          ctx.drawImage(bg, 240, 210, 430, 160);
      
        }
      // 将图片保存需要的实例，不写保存可以不需要
        that.setData({
          ctx:canvas
         })
      })



  }
})