JavaScript结合canvas获取图片某一区域的rgba平均值的方法
获取图片rgba的平均值 function getcolor() { //js创建一个canvas元素 var canvas = document.createElement('canvas'); //设置canvas的大小,动态获取也是可以的。 canvas.width = 600; canvas.height = 350; //表示绘制一个2d图 var context = canvas.getContext("2d"); //获取图片元素 // var img = document.getElementById('img'); //创建图片元素用来加载图片地址 var nimg = new Image(); nimg.onload = function () { var r = 0; var g = 0; var b = 0; var a = 0; var fxs = 600 * 300; //设置要绘制的图片 context.drawImage(nimg, 0, 0); //获取图片的像素信息,并.data获得数组 var data = context.getImageData(0, 0, 600, 300).data; //获取所有的rgba的和 for (var i = 0; i < data.length / 4; i++) { r += data[i * 4]; g += data[i * 4 + 1]; b += data[i * 4 + 2]; a += data[i * 4 + 3]; } //获得平均值 var rgba = 'rgba(' + parseInt(r / fxs) + ',' + parseInt(g / fxs) + ',' + parseInt(b / fxs) + ',' + parseInt(a / fxs) + ')'; console.log(rgba) if (parseInt(r / fxs) > 60 || parseInt(g / fxs) > 60 || parseInt(b / fxs) > 60) { console.log("成功") // console.log(nimg.src) // console.log(img.src) return true; //true // nimg.src = img.src; } else { console.log("失败") return false; //false } } //将图片地址传给nimg nimg.src = img.src; } getcolor()