Welcome folks today in this blog post we will be removing background of bulk images
from url’s in Textarea in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Remove Background of Bulk Images</title> </head> <style> body { margin: 0; background-color: yellow; display: flex; justify-content: center; align-items: center; height: 100vh } </style> <body> <textarea name="" id="urls" cols="30" rows="5"></textarea> <button onclick="removebackground()">Remove Background From Images</button> </body> </html> |
As you can see we have written the html
code in which we have the textarea
widget where users will write the image urls to remove the background of bulk images. And then we have the simple button
to call a external function called removebackground()
. Now we need to define this function inside the javascript
code as shown below
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
function removebackground() { let images = document.getElementById('urls').value.split('\n') images.forEach(imageUrl => { const image = new Image(); image.onload = ({ target }) => { const w = Math.round(target.width); const h = Math.round(target.height); const canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; const canvasContext = canvas.getContext("2d"); canvasContext.drawImage( target, 0, 0, target.width, target.height, 0, 0, w, h ); const canvasImageData = canvasContext.getImageData(0, 0, w, h); for ( let index = 0, dataLength = canvasImageData.data.length; index < dataLength; index += 4 ) { const r = canvasImageData.data[index]; const g = canvasImageData.data[index + 1]; const b = canvasImageData.data[index + 2]; if ([r, g, b].every((item) => item > 230)) canvasImageData.data[index + 3] = 0; } target.width = w; target.height = h; canvasContext.putImageData(canvasImageData, 0, 0); document.body.append(image, canvas); }; image.crossOrigin = ""; image.src = imageUrl; }); } |
As you can see we are getting the urls
from the textarea and basically we are using the split()
function to split the result coming from the textarea into multiple
lines. And then we are using the canvas
element to draw the image
on the canvas after removing the background
from the images.