js：使用canvas检测图片亮度
测试
<!DOCTYPE html>
<html>
<head>
<title>图片亮度测试</title>
<style type="text/css"></style>
</head>
<body>
<div>
<img
src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCABgAGADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDxHcdu3tnNJk+tAJGffikoAXJoz70UZoGGTRn3oo70CDNFBOWJwBk9BSsBuO0kj3FADaWlVc55HTPJpDQAUlPkPRQ5ZQOM9qZQAtLRilyNoGOc9c0DAYB5GR6U3NLRigAFFLSsrIcMMEjNAhuKO9StEPl2NuyMnjofSp7fTbi6bbFGSaAuU6URswyAcetbn9hiEGR33qvX0J9KpXEpSMxcAZz/APWp27iv2M8jmil6mikMUjBxQQRjIPNJmjOaAFXbn5gce1OduNin5ASRkc0ynRpvcA8DPJFACBSxwK1dO0W4vpAqITn2rT8PeHn1G5UAfLnqa9q8M6ZoukRjEZvLoD7kQ4B9yeKbtHczcm9EcToPwrubpFmuUKR9Tnjirmq2mmaHbNb24jLgYLYr0DxBrhWzKzypbw4/1MJ5P1NeJeJNeikldbdQo9e9EJNktamVqupoPkQdOg7fWuakkMjkk9afcTGRiSahldW2bI9mFAPJO4+tDdzSKsFLmmg8U5lIUEggHofWkUFFFHU0AOMbh9hU7vStOxswWUscn0FUo2CcDBz611Hh/wDsU280up3xhZQPLVVySaa3Jlc39FSG3Cm5k/dDqgOB+NbE/jS002Fo7ONE7ZA6151q+qQC722jsYsAk561iS3TyE8k03Z7kqLOo1rxXdak7fOxHWuVlnaRiSafbC2klb7XLLGmxipjQMS2OAQSOM96ji8olvNLgbTt2gH5u2fapv0KUbER5puKcaSgoO1BYkAEnA6UdaSgY+inttwNoIOOcmmUCFyaTNOXbu+cEr7HFMoAeSFKlGJOOeMYNMzS4OM4OM4zSxxvNIscaM8jnaqqMkn0FAxuaM0MCrFSCCDyD2pKAA0UUmaQiWGaSCTzImKvgjI9xg1GScnPWnIjlGkCOUXqwHAPbNISWJJOSepNMY4nmngs8ezKhVy3OBUdFAgpKM0ZoANx27cnGc4pASDkcGg0UDCiiikIKaetOpCM0wASOqMgdgjdVB4NOR2UMAfvDBpmKeAT0GaAP//Z"
/>
<img
src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCABAAEADASIAAhEBAxEB/8QAHAAAAgIDAQEAAAAAAAAAAAAABAUCBgEDBwAI/8QAMRAAAQMDAwIDBwMFAAAAAAAAAQIDBAARIQUSMQYHIkFRExRCYXGBoSNS0TKRscHC/8QAGAEBAQEBAQAAAAAAAAAAAAAABAMCAQb/xAAgEQACAgICAwEBAAAAAAAAAAABAgADBBFBgRMhofAx/9oADAMBAAIRAxEAPwBE1G+VGNR/lRTca/lRbMSxGK9+1oE8cogzMbjFMGY3HhohmIfSijp77qNrMlTCv3BtKj+cVB7pZUJkWIvqKYMRcDFS07TnGG9jry3l3ytfJ+3A+gsKbsQzi4ozWyy1HcHYin0plHicYrfHiWtimLEXjFHe4S61zlDUcXwKNZjZGKkyyKPYZ4xWmyJNaJFiNb4aPYjHyTWxlnF7UeyyL8UdsiKTHMixGJIsKYsRsjw1mO0Ba9MWGuDYUZ8iXWgzDEYm2KYMRj6VJhr5UwYaBtRmyRKrjzibCvpTGORfIqrMawEi3hN/UUfG1oI+K16w1rS6Y6iWqOU80xZUmquzrjSs7U0azrDZ4P5ozWvFLQvBlqYUjmj2VJ5FVRnWWwQCtP8AejmtYQLELGag1jSy0rLYwtJtmmDLqBVQZ1tA+IUY3ribc0VrGlRSs+Lh3I11viHANv2uqP8AsVuT3R1ttNzDgk+gcVf/ADVCUI1gEFo3wPCkVhQhgkF1F+MBP8U45ZPA/dwYxdcn91OhI7v60g2VEgot6rJ/6qS+83UCWlexd0ltzadu5tarHyv4651sj+bwObDKP4rxEUoCkSE5IF9yMfisHIB9kTYoYfwyzyO5vcHW5AhN9UMx3nHW2o/u+nIUd4UnatN1HJVnINrfatcbuZ3BhOstyO5OoL92UQ4DEZUXVBWd2ePKwxaqjOb94iONRp0qO/YLQ7GkBpxBSoG6Vj+k4+tbFohlRUqYdxVclTnJPB55rnlB9amjWw97+y0T+7HXk0pQ51/qbSUFRAisMskgngmxJtbFCwu7HX8Bft1dea26oI2+Nbagk58lJIP3F8VLTuqdJhdOOaC9oMGUp1SlJlLessXUFDyuRdIB8WQAMZvukdb6QtvS1jp+CV6cpHtXgtoKkAABW79O11bQLkHAFhe5I2yriSvh2Nnlej38nPGwO9z/2Q=="
/>
<img
src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
/>
<pre>
Click on image for brightness value
</pre>
</div>
</body>
<script type="text/javascript">
function getImageBrightness(imageSrc, callback) {
var img = document.createElement("img");
img.src = imageSrc;
// 解决跨域问题
img.setAttribute('crossOrigin', 'anonymous');
img.style.display = "none";
document.body.appendChild(img);
var colorSum = 0;
img.onload = function () {
// create canvas
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log('imageData', imageData)
var data = imageData.data;
var r, g, b, avg;
for (var x = 0, len = data.length; x < len; x += 4) {
r = data[x];
g = data[x + 1];
b = data[x + 2];
avg = Math.floor((r + g + b) / 3);
colorSum += avg;
}
var brightness = Math.floor(colorSum / (this.width * this.height));
callback(brightness);
};
}
/// debug code
var imgs = document.body.getElementsByTagName("img");
for (var x = 0; x < imgs.length; x++) {
imgs[x].onclick = function () {
getImageBrightness(this.src, function (brightness) {
document.getElementsByTagName("pre")[0].innerHTML =
"Brightness: " + brightness;
});
};
}
</script>
</html>
效果
在小程序中使用
在小程序中使用 camera 组件可以实时获取图片的实时帧数据。
https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.onCameraFrame.html
// 节流函数
const throttle = (() => {
let canRun = true // 通过闭包保存一个标记
return function(fn, time) {
if (!canRun) return // 在函数开头判断标记是否为true，不为true则return
canRun = false // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn && fn()
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
canRun = true
}, time || 1000)
}
})()
// 根据图像 buffer 获取亮度
function getImageBrightness({ data, width, height }) {
let colorSum = 0
let r = null
let g = null
let b = null
let avg = null
for (let x = 0, len = data.length; x < len; x += 4) {
r = data[x]
g = data[x + 1]
b = data[x + 2]
avg = Math.floor((r + g + b) / 3)
colorSum += avg
}
var brightness = Math.floor(colorSum / (width * height))
return brightness
}
// 打开相机的同时调用此函数
listenBrightness () {
const fun = (frame) => {
const width = frame.width
const height = frame.height
const data = new Uint8Array(frame.data)
const brightness = getImageBrightness({data, width, height})
console.log('当前亮度：', brightness)
this.setData({
brightness: brightness
})
}
const context = wx.createCameraContext()
this.setData({
listener: context.onCameraFrame((frame) => {
throttle(fun.bind(this, frame), 500)
})
})
this.data.listener && this.data.listener.start()
}
// 关闭相机的同时调用此函数
this.data.listener && this.data.listener.stop()
可以灵活根据当前亮度进行开发
参考文档
https://blog.csdn.net/weixin_43972437/article/details/96139645