Compare duplicates of images in arrays

Q: How to make a comparison between two images?

Both of the images have has to be the same size and channels. Each of the pixels has to be the same value. We can do it in the following seven steps: Load the original image and the second one Check the size of the images Find what’s different between two images Convert them into grayscale Increasing the size of the differences

Q: What is duplicate image finder (DIF) Python?

✅ The Duplicate Image Finder (DIF) Python script automates this task for you! The DIF searches for images in a… The DIF is now also available as Python package difPy for you to install via the pip installer. The Duplicate Image Finder (DIF) searches for images in a folder, compares the images and checks whether these are duplicates.

Q: How to compare two NumPy arrays?

We generally use the == operator to compare two NumPy arrays to generate a new array object. Call ndarray.all () with the new array object as ndarray to return True if the two NumPy arrays are equivalent. We can also use greater than, less than and equal to operators to compare. To understand, have a look at the code below. Attention geek!

Tags:

javascript

compare

duplicates

I have tried following this previous question: Comparing 2 Image's sources in Javascript However, there is no solution to this on the page

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>

390

asked Dec 09 '20 15:12

user14578710

2 Answers

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:

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.

answered Sep 20 '22 05:09

Berti

I am not entirely sure by your intended or desired output but from what I got, I would approach this problem like this:

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",
];

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",
];

function getRandomPair() {
    let image1 = '';
    let image2 = '';

    uniquePairOfImage = [];

    while(image1 === image2) {
        image1 = myImages[Math.floor(Math.random() * myImages.length)];
        image2 = secondImages[Math.floor(Math.random() * secondImages.length)];
    }


    uniquePairOfImage.push(image1);
    uniquePairOfImage.push(image2);

    return uniquePairOfImage;
}

console.log(getRandomPair());

This would generate a pair of random pictures.

answered Sep 21 '22 05:09

Kati

Related questions
                            
                                Scroll to top of a bubble in botframework webchat
                            
                                How to make Material-UI Dialog resizable
                            
                                rxjs: Subscriber does not fire on all changes in different class
                            
                                How to make specific options to appear in select menu?
                            
                                New eslint errors with the @typescript-eslint/no-unsafe-* rules
                            
                                Is there a difference between `this.function()` and `function.call(this)`?
                            
                                Displaying content of Component that i fetched with @ContentChildren or @ViewChild
                            
                                Does [history.push] in useEffect dependency array cause rerenders?
                            
                                JavaScript Promises confusion anti-pattern?
                            
                                Vue Router save scroll position on a route and go back to that position when navigating back?
                            
                                How to properly bind this to a getter/setter in Javascript
                            
                                Do not fail whole task even if one of promises rejected
                            
                                Fit SVG transformed element into the rect bounds with JavaScript
                            
                                Angularjs: Local storage contenteditable not saving
                            
                                AngularJS ng-repeat through complex and dynamic JSON Array
                            
                                cant get length of m4a audio file on webpage
                            
                                Next.js: Module not found: Can't resolve 'canvg'
                            
                                Typescript generates declaration d.ts file with `#private;` field
                            
                                How to stream Base64 data into a video
                            
                                React Flash Message: How to make the message show without refreshing the page but refresh on 200

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With