微信小程序二维码反色显示：从扫描到Canvas绘制

本文将介绍如何在微信小程序中将扫描到的二维码信息转换为图片，并使用Canvas将图片反转为反色二维码，最终显示在页面上。

1. 扫描二维码并获取信息

首先，使用 uni.scanCode API 扫描二维码并获取信息。

uni.scanCode({
  success: function(res) {
    // res.result 为扫描到的二维码信息
    // 将其传递给微信小程序
  }
});

2. 将二维码信息转换为图片

将 res.result 转换为 base64 格式的图片数据，并使用 wx.createImage API 创建图片对象。

wx.createImage({
  src: 'data:image/png;base64,' + res.result,
  success: function(img) {
    // 将图片反转为反色二维码
  }
});

3. 使用Canvas将图片反转为反色二维码

使用 wx.createCanvasContext 创建 Canvas 对象，并使用 drawImage 方法将图片绘制到 Canvas 上。然后，使用 globalCompositeOperation 属性设置为 'difference'，并填充白色背景，即可实现反色效果。

var canvas = wx.createCanvasContext('canvas');
canvas.drawImage(img, 0, 0, img.width, img.height);
canvas.globalCompositeOperation = 'difference';
canvas.fillStyle = 'white';
canvas.fillRect(0, 0, img.width, img.height);
canvas.draw();

4. 将反色二维码显示在小程序页面上

最后，在页面中添加 canvas 元素，并设置其宽高，即可显示反色二维码。

<canvas id='canvas' style='width: {{img.width}}px; height: {{img.height}}px;'></canvas>

注意：

这段代码示例只展示了核心功能，还需要补充一些变量定义、函数调用等代码才能完整运行。例如，需要定义一个变量存储 res.result 信息，并将其传递给 wx.createImage API。另外，需要在 wx.createImage 的 success 回调函数中，调用 canvas.draw() 方法来更新 Canvas 内容。

希望这段代码示例能帮助您理解在微信小程序中如何将二维码信息转换为图片，并使用Canvas绘制反色二维码。