在开发扫描二维码过程中,发现白底黑码可以直接用uni.scanCode扫描出来,但是黑底白码就扫不出来,于是就试试反色后的二维码能不能扫描出来,没想到真的可以,下面附上完整代码:
<u-icon name="scan" size="40" width="40" height="40" @click="scanCodeClick"></u-icon>
<canvas canvas-id="myCanvas" style="width: 300px; height: 400px;"></canvas>
// 点击扫描
scanCodeClick() {
const vm = this
uni.chooseImage({
sourceType: ['camera'],
count: 1,
success: (res) => {
const filePath = res.tempFilePaths[0];
uni.getImageInfo({
src: filePath,
success: function(imageInfo) {
const ctx = uni.createCanvasContext('myCanvas', vm);
const imgUrl = filePath; // 获取拍照后的图片路径
// 绘制原始图片到Canvas
ctx.drawImage(imgUrl, 0, 0, 300, 400);
ctx.draw(false, () => {
uni.canvasGetImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 300,
height: 400,
success(res) {
vm.invertColors(res)
}
})
});
}
});
}
});
},
// 反色并重新绘制
invertColors(info) {
const dataArray = info.data;
// 遍历每个像素点,进行反色处理
for (let i = 0; i < dataArray
.length; i += 4) {
dataArray[i] = 255 - dataArray[
i]; // 红色值取反
dataArray[i + 1] = 255 - dataArray[
i + 1]; // 绿色值取反
dataArray[i + 2] = 255 - dataArray[
i + 2]; // 蓝色值取反
// dataArray[i + 3] 是透明度值,这里不做处理
}
const code = jsQR(dataArray, 300, 400);
console.log(code)
// return
// 将处理后的图像数据重新绘制到canvas上
uni.canvasPutImageData({
canvasId: 'myCanvas',
x: 0, // 绘制起始x坐标
y: 0, // 绘制起始y坐标
width: 300,
height: 400,
data: dataArray,
success: (e) => {
console.log('反色处理成功');
},
fail: (err) => {
console.error(
'反色处理失败',
err
.errMsg ||
'未知错误');
},
});
},