Tips for getting rid of the ghosting effect or white background of a PNG image

Question

Tips for getting rid of the ghosting effect or white background of a PNG image

As a new developer, I am currently working on my personal chess project and have recently mastered the drag and drop system. However, I would like to explore different methods for achieving this. Is there a way to eliminate the white background in the process?

One potential solution could involve removing the white background from the ghost image.
An alternative approach might be to replace the ghost image with the actual image being dragged.
Alternatively, it could be an option to completely remove the ghost image while dragging, as the piece can still be viewed in each square when hovering over it.

If any of these solutions are feasible, it would be greatly appreciated!

Here is the link to my ongoing project: https://codepen.io/ThalisonAmaral/full/qBYZmZq. You will likely need to work with the dragstart() function.

function dragstart() {
    squaresDrop.forEach(square => square.classList.add('highlight'));
    this.classList.add('is-dragging');
}

The Drag and Drop functionality can be found towards the end of the Js Code file. Since I am not entirely sure about the specifics of what I am dealing with, I have attempted to find possible solutions by using DataTransfer.setDragImage() without much success.

I initially thought that using it could help in replacing the ghost image with an actual image, but upon further review, it doesn't seem to address the issue directly. However, I may be mistaken in my understanding.

javascript css image drag chess

Answer 1

Answer №1

To achieve this task easily, you can simply adjust the opacity of the image to 0 when dragging starts and set it back to 1 upon dropping.

I included this.style.opacity = 0; on line 105 and this.style.opacity = 1; on line 11

Hopefully, this solution meets your requirements!

/* ------- BOARD GENERATOR -------*/

const body = document.body;

const $addClass = (element,className) => {
    element.classList.add(className);
};

const $setId = (element,idName)=>{element.setAttribute('id',idName)}

const $createSquare = (element,squareColor,board)=> {
    ...
        var x = light;
        light = dark;
        dark = x;
    }
    const squares = document.querySelectorAll('.square');
    
    /*PUTTING ALL THE IDS IN EACH SQUARE */
    for (let i = 0; i < squares.length; i++) {
        $setId(squares[i],coordinates[i])
    }
    // ----- BOARD STYLE -----
    const lightSquares = document.querySelectorAll('.light');
    const darkSquares = document.querySelectorAll('.dark');

    board.style.width = size+'px';
    board.style.height = size+'px';

    lightSquares.forEach((value,index)=>{
        value.style.height = size/8+'px';
        value.style.width = size/8+'px';
        value.style.backgroundColor = lightColor;

        darkSquares[index].style.height = size/8+'px';
        darkSquares[index].style.width = size/8+'px';
        darkSquares[index].style.backgroundColor = darkColor;
    })

}

const boardzone = document.getElementById('boardzone');
createBoard(500,'white','rgb(64, 100, 145)',boardzone);

/*-------- PIECE RENDER --------*/

const king = document.createElement('img');
king.setAttribute('class','piece');
king.src = "https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wk.png";
e1.appendChild(king)


/*-------- DRAG AND DROP --------*/


var audio = new Audio('sound.wav');
var pieces = document.querySelectorAll('.piece');
console.log(pieces);
var squaresDrop = document.querySelectorAll('.square');
pieceCheck = ()=> {
    ...
    function dragend(){
        this.style.opacity = 1;
        this.classList.remove('is-dragging'); 
        audio.play(); 
    }

})}
pieceCheck(); //Checking if a new piece was added in the board

squaresDrop.forEach(square=>{
    ...
})

body {
  background-color:rgb(15,15,15);
}
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
#boardzone{
  margin: 60px auto;
  display: flex;
  justify-content:center;
}

/* Drag and Drop CSS */

.piece {
  height: 100%;
  user-select: none;
}
.highlight {
  background-color:rgba(14,14,14,0.2);
}
.is-dragging {
  cursor:move;
  opacity: 0.3;
  transform: translate(0, 0);
}
.over{
  background-color: rgba(173, 240, 118, 0.315);
}

<div id='boardzone'></div>

Answer 2

To achieve this task easily, you can simply adjust the opacity of the image to 0 when dragging starts and set it back to 1 upon dropping.

I included this.style.opacity = 0; on line 105 and this.style.opacity = 1; on line 11

Hopefully, this solution meets your requirements!

/* ------- BOARD GENERATOR -------*/

const body = document.body;

const $addClass = (element,className) => {
    element.classList.add(className);
};

const $setId = (element,idName)=>{element.setAttribute('id',idName)}

const $createSquare = (element,squareColor,board)=> {
    ...
        var x = light;
        light = dark;
        dark = x;
    }
    const squares = document.querySelectorAll('.square');
    
    /*PUTTING ALL THE IDS IN EACH SQUARE */
    for (let i = 0; i < squares.length; i++) {
        $setId(squares[i],coordinates[i])
    }
    // ----- BOARD STYLE -----
    const lightSquares = document.querySelectorAll('.light');
    const darkSquares = document.querySelectorAll('.dark');

    board.style.width = size+'px';
    board.style.height = size+'px';

    lightSquares.forEach((value,index)=>{
        value.style.height = size/8+'px';
        value.style.width = size/8+'px';
        value.style.backgroundColor = lightColor;

        darkSquares[index].style.height = size/8+'px';
        darkSquares[index].style.width = size/8+'px';
        darkSquares[index].style.backgroundColor = darkColor;
    })

}

const boardzone = document.getElementById('boardzone');
createBoard(500,'white','rgb(64, 100, 145)',boardzone);

/*-------- PIECE RENDER --------*/

const king = document.createElement('img');
king.setAttribute('class','piece');
king.src = "https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wk.png";
e1.appendChild(king)


/*-------- DRAG AND DROP --------*/


var audio = new Audio('sound.wav');
var pieces = document.querySelectorAll('.piece');
console.log(pieces);
var squaresDrop = document.querySelectorAll('.square');
pieceCheck = ()=> {
    ...
    function dragend(){
        this.style.opacity = 1;
        this.classList.remove('is-dragging'); 
        audio.play(); 
    }

})}
pieceCheck(); //Checking if a new piece was added in the board

squaresDrop.forEach(square=>{
    ...
})

body {
  background-color:rgb(15,15,15);
}
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
#boardzone{
  margin: 60px auto;
  display: flex;
  justify-content:center;
}

/* Drag and Drop CSS */

.piece {
  height: 100%;
  user-select: none;
}
.highlight {
  background-color:rgba(14,14,14,0.2);
}
.is-dragging {
  cursor:move;
  opacity: 0.3;
  transform: translate(0, 0);
}
.over{
  background-color: rgba(173, 240, 118, 0.315);
}

<div id='boardzone'></div>

Tips for getting rid of the ghosting effect or white background of a PNG image

Answer №1

Similar questions

Tips for showing error messages in response to exceptions

enhancing feature to enable automatic selection of chosen option

Class Chat Practice Application

Enhance Select Dropdown in AngularJS with Grouping and Default Selection

Verify FileReader.onload function using Jasmine and AngularJS

Exploring the functionality of Vue.js Multiselect with data

Could a class method be accessed from outside a nested handler method in JavaScript?

What could be causing this Angular controller to throw the error message "Error: Unknown provider: nProvider <- n"?

Why does JavaScript return NaN when combining arrays of different lengths?

Having trouble with the webpage not loading correctly after implementing react-router-dom

I'm curious about how to utilize module.exports in this particular manner

Submitting information to an HTML page for processing with a JavaScript function

Where should we place the JavaScript reference in our CSHTML file in an MVC framework?

Validation of forms using ajax and javascript

"Unraveling nested data structures in React using JSON parsing

Guide on transferring value from a <select> element using JavaScript

Vuetify Chip shatters during production

Efficiently sorting items by category name in PHP with Ajax

Error Loading JQuery: The function $() is not recognized in the Shopify platform

Employing the `signInWithRedirect` method with an `authDomain` that does not match the app's domain will result in an incomplete sign-in process, without any error notifications being displayed