获取图片的原始高度宽度和获取图片的平均色值
获取图片的原始宽高度
html结构
<img id="image_id" src="" alt="">
<div class="color-end" style="width:200px;height:200px;border:1px solid #000;"></div>function getImgWidthHeight() {
var img = new Image();
img.addEventListener('load', function () {
console.log('-----', img.width, img.height, img.naturalWidth, img.naturalHeight);
// if need color
// var canvas = document.createElement('canvas');
// getImageColor(canvas, img);
}, false);
img.src = 'https://static-image.xfz.cn/1535618935_589.jpg' + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '');
}获取图片的平均色值
function getImageColor(canvas, img) {
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
// 获取像素数据
var data = context.getImageData(0, 0, img.width, img.height).data;
var r = 0;
var g = 0;
var b = 0;
// 取所有像素的平均值
for (var row = 0; row < img.height; row++) {
for (var col = 0; col < img.width; col++) {
r += data[((img.width * row) + col) * 4];
g += data[((img.width * row) + col) * 4 + 1];
b += data[((img.width * row) + col) * 4 + 2];
}
}
// 求取平均值
r /= (img.width * img.height);
g /= (img.width * img.height);
b /= (img.width * img.height);
// 将最终的值取整
r = Math.round(r);
g = Math.round(g);
b = Math.round(b);
var str = "rgb(" + r + "," + g + "," + b + ")";
console.log('======str', str)
// $('.color-end').css('background', str);
}