微信小程序显示二维码

在请求接口的success下面写入这段代码。

在他的上一个请求数据的打他下面创建一个空的用于存放数据的东西比如obj：" "用于存放数据。

将它放到一个一个点击事件中，通过触发点击事件执行代码

如果窒息看代码的话const tupian 这个变量让他等有一张网络图片。

这段代码是使用微信小程序的 canvas 绘图功能，在一个 canvas 元素中绘制图片。

1.首先通过 wx.createSelectorQuery() 创建一个查询对象 query，然后使用 query.select('#myCanvas') 选择页面中的 id 为 myCanvas 的 canvas 元素。

const query = wx.createSelectorQuery()

2.调用 fields 方法指定需要查询的属性，这里设置了 node 和 size，即获取节点信息和大小信息。

 .fields({node: true,size: true})

3.调用 exec 方法执行查询操作，res 是一个数组，包含了查询结果，对应查询属性的设置。

 .exec((res) => {}

4.从 res 中取出第一个结果 res[0]，获取 canvas 元素和宽高信息，然后进行一系列的绘图操作。

const canvas = res[0].node

5.定义图片地址 tupian，使用 canvas.getContext('2d') 获取 2D 绘图上下文 ctx。

 const tupian = 'https://pic.imgdb.cn/item/649bdde41ddac507cca5dfab.jpg';

6.通过 wx.getSystemInfoSync().pixelRatio 获取屏幕的像素比例，并根据比例设置 canvas 的宽高。

           const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dpr // 获取宽canvas.height = res[0].height * dpr // 获取高

7.使用 ctx.scale(dpr, dpr) 缩放绘图上下文，以适应不同屏幕的分辨率。

      ctx.scale(dpr, dpr)

8.使用 canvas.createImage() 创建一个图像实例 image，并设置 image.src 为指定的图片地址 tupian。

 let image = canvas.createImage();//创建iamge实例

9.在 image.onload 回调函数中，等待图片加载完成后，调用 ctx.drawImage(image, 0, 0, 270, 370) 在 canvas 上绘制背景图。

           image.onload = function () {ctx.drawImage(image, 0, 0, 270, 370); // 背景图}

10.使用 wx.getFileSystemManager() 获取文件系统管理器，生成一个唯一的文件名 codeimg。

     const fs = wx.getFileSystemManager();var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';

11.使用 fs.writeFile 方法将接口返回的 base64 图片数据写入文件系统中，文件名为 codeimg。注意，要去掉 base64 数据前面的 data:image/png;base64,。

            fs.writeFile({filePath: codeimg,data: that.data.base.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)encoding: 'base64',}）

12.使用 wx.createSelectorQuery() 再次选择 #myCanvas，获取 canvas 元素的上下文 ctx。

                wx.createSelectorQuery().select('#myCanvas').fields({node: true,size: true})

13.创建一个 Image 对象 bg，设置 bg.src 为之前保存的图片路径 codeimg。

                    const bg = canvas.createImage();bg.src = codeimg;

14.在 bg.onload 回调函数中，等待图片加载完成后，调用 ctx.drawImage(bg, 65, 170, 140, 140) 绘制图片在 canvas 上。

                 bg.onload = function () {ctx.drawImage(bg, 65, 170, 140, 140);}

总之，这段代码实现了在 canvas 元素上绘制背景图和从 base64 图片数据中生成并绘制另一张图片。这种绘图操作常见于小程序中的图像处理和展示需求。

以下是全部代码

        // 开始const query = wx.createSelectorQuery()query.select('#myCanvas').fields({node: true,size: true}).exec((res) => {const tupian = 'https://pic.imgdb.cn/item/649bdde41ddac507cca5dfab.jpg';const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dpr // 获取宽canvas.height = res[0].height * dpr // 获取高ctx.scale(dpr, dpr)// 到这里就可以直接绘制   //可注释let image = canvas.createImage();//创建iamge实例image.src = tupian;  // 引入网络图片image.onload = function () {ctx.drawImage(image, 0, 0, 270, 370); // 背景图// 可注释结束// 绘制base64图片//声明文件系统const fs = wx.getFileSystemManager();var times = new Date().getTime();var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';console.log(that.data.base, 'dfghjklkjhgfdghjk')console.log(tupian);//将base64图片写入fs.writeFile({filePath: codeimg,data: that.data.base.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)encoding: 'base64',success: () => {console.log(codeimg);wx.createSelectorQuery().select('#myCanvas').fields({node: true,size: true}).exec((res) => {let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文let canvas = res[0].node;const bg = canvas.createImage();bg.src = codeimg;bg.onload = function () {ctx.drawImage(bg, 65, 170, 140, 140);}})}})}});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！