28,404
社区成员
发帖
与我相关
我的任务
分享这里面的函数使用，报错，是怎么回事呢？
function getHistogram(imageData) {
var arr = [];
for (var i = 0; i < 64; i++) {
arr[i] = 0;
}
var data = imageData.data;
var pow4 = Math.pow(4, 2);
for (var i = 0, len = data.length; i < len; i += 4) {
var red = (data[i] / 64) | 0;
var green = (data[i + 1] / 64) | 0;
var blue = (data[i + 2] / 64) | 0;
var index = red * pow4 + green * 4 + blue;
arr[index]++;
}
return arr;
}
function cosine(arr1, arr2) {
var axb = 0,
a = 0,
b = 0;
for (var i = 0, len = arr1.length; i < len; i++) {
axb += arr1[i] * arr2[i];
a += arr1[i] * arr1[i];
b += arr2[i] * arr2[i];
}
return axb / (Math.sqrt(a) * Math.sqrt(b));
}
function gray(imgData) {
var data = imgData.data;
for (var i = 0, len = data.length; i < len; i += 4) {
var gray = parseInt((data[i] + data[i + 1] + data[i + 2]) / 3);
data[i + 2] = data[i + 1] = data[i] = gray;
}
return imgData;
}// JavaScript Document
我是这样调用的：
<script>
document.write(cosine(getHistogram('<img src=\"1.jpg\" />'),getHistogram('<img src=\"2.jpg\" />')));
</script>
调试错误提示：TypeError: data is undefined
是缺少组件么，还是什么问题啊？？求指点
var arr = [];
for (var i = 0; i < 64; i++) {
arr[i] = 0;
}
var data = imageData.data;
var pow4 = Math.pow(4, 2);
for (var i = 0, len = data.length; i < len; i += 4) {
var red = (data[i] / 64) | 0;
var green = (data[i + 1] / 64) | 0;
var blue = (data[i + 2] / 64) | 0;
var index = red * pow4 + green * 4 + blue;
arr[index]++;
}
return arr;
}
function cosine(arr1, arr2) {
var axb = 0,
a = 0,
b = 0;
for (var i = 0, len = arr1.length; i < len; i++) {
axb += arr1[i] * arr2[i];
a += arr1[i] * arr1[i];
b += arr2[i] * arr2[i];
}
return axb / (Math.sqrt(a) * Math.sqrt(b));
}
function gray(imgData) {
var data = imgData.data;
for (var i = 0, len = data.length; i < len; i += 4) {
var gray = parseInt((data[i] + data[i + 1] + data[i + 2]) / 3);
data[i + 2] = data[i + 1] = data[i] = gray;
}
return imgData;
}// JavaScript Document
我是这样调用的：
<script>
document.write(cosine(getHistogram('<img src=\"1.jpg\" />'),getHistogram('<img src=\"2.jpg\" />')));
</script>
调试错误提示：TypeError: data is undefined
是缺少组件么，还是什么问题啊？？求指点
...全文
请发表友善的回复…
发表回复
Dogfish 2015-04-12
- 打赏
- 举报
楼主看看这个链接
http://www.w3schools.com/tags/canvas_imagedata_data.asp
叫我梁大侠 2015-04-12
- 打赏
- 举报
谢谢啊，那我该怎么传递啊？传递图片ID么？
Dogfish 2015-04-12
- 打赏
- 举报
imageData.data
你传入的是个字串来的。
叫我梁大侠 2015-04-12
- 打赏
- 举报
function calColorDist(obj) {
var allA = [];
var allB = [];
var data = [];
var len = 0;
var gray = 0;
var canvas = null;
var ctx = null;
canvas = document.createElement("canvas")
ctx = canvas.getContext("2d");
canvas.width = 32;
canvas.height = canvas.width;
ctx.drawImage(obj, 0, 0, canvas.width, canvas.height);
data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
len = canvas.width / 16;
for(var i = 0; i < len * len; i++) {
allA[i] = [];
for(var j = 0; j < 256; j++) {
allA[i][j] = 0;
}
}
for (var i = 0; i < len; i++) {
for(var j = 0; j < len; j++) {
for (var m = 0; m < 16; m++) {
for (var n = 0; n < 16; n++) {
gray = (data[(i * 16 + j * 16 + m * len * 16 + n) * 4] * 19595 + data[(i * 16 + j * 16 + m * len * 16 + n) * 4 + 1] * 38469 + data[(i * 16 + j * 16 + m * len * 16 + n) * 4 + 2] * 7472) >> 16;
allA[i + j * len][gray]++;
allB.push(gray);
}
}
}
}
var n = allB.length;
var n1 = 0;
var n2 = 0;
var u1 = 0;
var u2 = 0;
var maxThreshold = 0;
var tempThreshold = 0;
var threshold = 0;
for(var i = 0; i < 256; i++) {
for(var j = n; j--;) {
if(allB[j] <= threshold) {
n1++;
u1 += allB[j];
} else {
n2++;
u2 += allB[j];
}
}
if(n1) {
u1 = u1 / n1;
}
if(n2) {
u2 = u2 / n2;
}
tempThreshold = n1 * n2 / (n * n) * (u1 - u2) * (u1 - u2);
if(tempThreshold >= maxThreshold) {
maxThreshold = tempThreshold;
threshold = i;
}
}
for(var i = n; i--;) {
allB[i] = defineTheRange(allB[i], threshold);
}
return {"first": allA, "second": allB};
}
function calSimilarity(dataA, dataB) {
if(!dataA || !dataB) {
return;
}
var result = 0;
var resultA = 0;
var resultB = 0;
var x = 0;
var y = 0;
var z = 0;
for(var i = 0; i < dataA.first.length; i++) {
for (var j = 0; j < dataA.first[0].length; j++) {
x += dataA.first[i][j] * dataB.first[i][j];
y += dataA.first[i][j] * dataA.first[i][j];
z += dataB.first[i][j] * dataB.first[i][j];
}
if(y && z) {
resultA += x / (Math.sqrt(y) * Math.sqrt(z));
}
}
resultA = resultA / dataA.first.length;
for(var i = 0; i < dataA.second.length; i++) {
resultB += dataA.second[i] ^ dataB.second[i];
}
resultB = 1 - resultB / dataA.second.length;
// if(Math.abs(resultA - resultB) < 0.5) {
result = ((resultA + resultB) / 2).toFixed(2);
// } else {
// result = Math.max(resultA, resultB).toFixed(2);
// }
console.log(resultA + "|" + resultB + "|" + result);
return result;
}
<img src="1.jpg" id="p1" height="120"/>
<img src="3.jpg" id="p2" height="120"/>
<script>document.write(calSimilarity(calColorDist(document.getElementById("p1")), calColorDist(document.getElementById("p2"))))</script>
我刚找到这个，能正常调试，但是我觉着准确度不高，求大神帮忙看下算法
叫我梁大侠 2015-04-12
- 打赏
- 举报
谢谢啊 你发的这个地址打不开哦..
额，那看样子这JS是无法实现了么
谢谢啊..看样子这JS只是计算绘制出来的图形相似率，而不是任意两张图片的相似率？
天际的海浪 2015-04-12
- 打赏
- 举报
getHistogram参数要求是canvas中的 getImageData() 方法返回的数据
斯洛文尼亚旅游 2015-04-12
- 打赏
- 举报
getHistogram参数错了。。是canvas对象
http://www.jb51.net/w3school/html5/canvas_imagedata_data.htm
应该是你要将图片绘制到canvas里面后，传递canvas对象到getHistogram里面
canvas是html5的元素，ie8-都不支持
