测试
<!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 bFohlRUqYdxVclTnJPB55rnlB9amjWw97+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