比较数组中图像的重复项 [英] Compare duplicates of images in arrays
本文介绍了比较数组中图像的重复项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经尝试遵循以下上一个问题:在Javascript中比较2个Image的源代码但是，此页面上没有解决方案
I have tried following this previous question: Comparing 2 Image's sources in Javascript However, there is no solution to this on the page
我正在尝试从2个数组中生成随机图像，同一图像无法相互比较.当我从if语句运行此代码时，重复项继续出现.但是，如果要生成相同的图像，那么将显示一对新图像，而不会显示重复的图像，这是我打算发生的事情.
I am trying to generate random images from 2 arrays, the same image can not be compared to each other. Duplicates continue to appear when i run this code from the if statement. However, what i intended to happen if if the same image is generated then a new pair of images would be displayed, and the duplicates would not be displayed.
function start2AFC() {
var answers = {};
window.sessionStorage.setItem("answers", JSON.stringify(answers))
var myImages = new Array();
var testImages = new Array();
testImages[0] = ["images/images/practice/practice1.jpg","images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg" ];
testImages[1] = ["images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg", "images/images/practice/practice1.jpg" ];
var myImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
"images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg",
"images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
"images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg",
"images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
"images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]
var secondImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
"images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg",
"images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
"images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg",
"images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
"images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]
window.sessionStorage.setItem("practiceImages", JSON.stringify(testImages))
window.sessionStorage.setItem("images", JSON.stringify(myImages))
window.sessionStorage.setItem("images_2", JSON.stringify(secondImages))
var counter = 0;
window.sessionStorage.setItem("counter", counter);
total = (JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length )
count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length) + - 1);
window.sessionStorage.setItem("total", total)
document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total
random2AFC();
}
function random2AFC() {
var practiceImages = JSON.parse(window.sessionStorage.getItem("practiceImages"));
var counter = JSON.parse(window.sessionStorage.getItem("counter"))
var image = document.getElementById("image");
var images = JSON.parse(window.sessionStorage.getItem("images"));
var images_2 = JSON.parse(window.sessionStorage.getItem("images_2"))
var rnd = Math.floor(Math.random() * images.length);
var rnd_2 = Math.floor(Math.random() * images_2.length);
counter += 1
window.sessionStorage.setItem("counter", counter)
// iterate through practice array
if (practiceImages.length > 0) {
image.src = practiceImages[0][0];;
image2.src = practiceImages[0][1];;
practiceImages.splice(0, 1);
window.sessionStorage.setItem("practiceImages", JSON.stringify(practiceImages));
} else {
// after every 15 images, display break image
if (counter % 15 == 0) {
image.src = "images/images/break_2afc.png"
image2.src = "images/images/break_2afc2.png"
} else {
// once every image has been displayed from both arrays, send to the database
if (images.length == 0 && images_2.length == 0) {
send2AFC();
} else {
// if icon1 and icon2 are not the same
// do not display duplicate, and generate new comparison
if ((images[rnd] != images_2[rnd_2])) {
image.src = images[rnd]
image2.src = images_2[rnd_2];
console.log("not duplicate")
} else {
// if icon 1 and icon2 are not the same, then continue
var random1 = Math.floor(Math.random() * images.length);
var random2 = Math.floor(Math.random() * images_2.length);
image.src = images[random1]
console.log("found duplicate")
image2.src = images_2[random2];
rnd = random1;
rnd_2 = random2;
}
}
counter = counter + 1
images.splice(rnd, 1);
images_2.splice(rnd_2, 1)
window.sessionStorage.setItem("images", JSON.stringify(images))
window.sessionStorage.setItem("images_2", JSON.stringify(images_2))
}
}
}
function store2AFC(id) {
total = window.sessionStorage.getItem("total")
count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length) - 1);
document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total;
var answers = JSON.parse(window.sessionStorage.getItem("answers"))
var img = document.getElementById("image");
var img2 = document.getElementById("image2");
var img_file = img.src.slice(-9);
var img_file2 = img2.src.slice(-9);
var selected = id;
console.log(selected);
var question = [img_file, img_file2]
if (selected == "image") {
answers[question] = [img_file]
} else {
answers[question] = [img_file2]
}
console.log(answers)
window.sessionStorage.setItem("answers", JSON.stringify(answers));
random2AFC();
}<!DOCTYPE html>
<html>
<head>
<title> App Icons? </title>
<link rel="stylesheet" type="text/css" href="css/mainstyle.css">
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-storage.js"></script>
</head>
<body class=body onload="start2AFC()">
<div>
<div>
<hr>
<div class=topbar>
<h1> Which app icon is more beautiful?</h1>
</div>
<hr>
<div class=imageContainer>
<div class=image>
<img onclick="store2AFC(this.id)" id="image" alt="Experimental Image" width="400px" height="200px">
</div>
<div class=image>
<img onclick="store2AFC(this.id)" type="image" id="image2" alt="Experiment Image" width="400px" height="200px">
</div>
</div>
</div>
<hr>
<div class=counter id=counter>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>推荐答案
let images1 = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg", "images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg", "images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg", "images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]
let images2 = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg", "images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg", "images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg", "images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]
function randomPair(array1, array2) {
// create an array of all the images, including the duplicates
const allImages = [...array1, ...array2]
let n = allImages.length;
let i, j;
// an empty array for the unique pairs
let uniquePairs = [];
for (i = 0; i < n; i++) {
for (j = i + 1; j < n; j++) {
// don't allow an image pair that contains 2 of the same image
if (allImages[i] !== allImages[j])
uniquePairs.push([allImages[i], allImages[j]])
}
}
// randomly choose a pair from the list of all unique pairs
let uniqueItem = uniquePairs[Math.floor(Math.random() * uniquePairs.length)];
console.log("There are " + uniquePairs.length + " unique combinations between the two arrays")
console.log("The returned unique pair is: " + uniqueItem.join(" + "))
return uniqueItem;
}
randomPair(images1, images2)我不确定我是否完全了解您想要的结果，但是为什么不这样处理呢?
I'm not sure if I am completely understanding your desired outcome, but why not approach it this way:
我正在理解这一点，因为您想比较从可能包含同一图像的2个独立数组中随机选择的2张图像，同时避免将图像与其自身进行比较.
I'm understanding this as you want to compare 2 images chosen randomly, from 2 separate arrays that may include the same image, while avoiding comparing an image to itself.
这将合并两个数组，创建所有可能的对，在出现任何重复时(图像与自身)过滤掉，并返回一个随机对.
This combines the two arrays, creates all of the possible pairs, filters out when any duplicates (image vs. itself), and returns a random pair.
从这里您可以显示组合，并且只需确保显示本身不重复即可.这并不是真正的随机选择，但是它会从所有可能的随机组合中随机选择，因此应该足够.
From here you could display the combinations, and just make sure that the display itself does not duplicate. This isn't a truly random selection, but it randomly selects from all of the possible random combinations, so it should suffice.
这篇关于比较数组中图像的重复项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
