Author: John Au-Yeung

Sometimes, we get a number in bytes, and we want to convert it to KB, MB, or GB.

We can do that easily with JavaScript.

In this article, we’ll look at how to convert a byte number to KB, MB, or GB with JavaScript.

Convert Size in Bytes to KB, MB, GB in JavaScript

We can convert a number in bytes to KB, MB, and GB easily with our own JavaScript function.

To create our own function, we write:

const formatBytes = (bytes, decimals = 2) => {
  if (bytes === 0) {
    return '0 Bytes';
  }
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

console.log(formatBytes(1024))
console.log(formatBytes(1024 * 1024))

We create the formatBytes function that takes the number of bytes and the number of decimals to round the number to.

First we check if bytes is 0.

If it is, we return '0 bytes' .

Next, we create the k constant to set the number of bytes in a kilobyte.

This lets us convert the number of bytes to what we want easily.

dm is the number of decimal places to round to.

We have the sizes array with the units to append to the converted number.

i is the exponent with base kthat’s raised to convert to the number of bytes when we have the number of KB, MB, GB, etc.

This is also the same as the index we use to pick the right unit from the sizes .

Finally, we convert the number of bytes to the unit we want by diving the number of byts by k raised to the power of i .

The number is rounded to the number of decimal places we want with toFixed .

toFixed returns a string with the rounded number in it.

And then we concatenate the string with sizes[1] .

Therefore, the first console log logs '1 KB' .

And the 2nd console log logs '1 MB' .

Conclusion

We can convert the number of bytes to the unit we want easily with math methods that are built into the JavaScript standard library.

Sometimes, we may want to convert an SVG image into another image format like JPEG and PNG in our web app.

We can do this completely from the client-side.

In this article, we’ll look at how to convert an SVG into another image format completely from the client-side.

Convert an SVG to an Image

We can convert an SVG to an image completely with client-side JavaScript code.

To do this, we write:

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="300" height="200">
   <rect width="100%" height="100%" fill="red" />
   <circle cx="150" cy="100" r="80" fill="green" />
   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
`
svgToPng(svg, (imgData) => {
  const pngImage = document.createElement('img');
  document.body.appendChild(pngImage);
  pngImage.src = imgData;
});

function svgToPng(svg, callback) {
  const url = getSvgUrl(svg);
  svgUrlToPng(url, (imgData) => {
    callback(imgData);
    URL.revokeObjectURL(url);
  });
}

function getSvgUrl(svg) {
  return URL.createObjectURL(new Blob([svg], {
    type: 'image/svg+xml'
  }));
}

function svgUrlToPng(svgUrl, callback) {
  const svgImage = document.createElement('img');
  document.body.appendChild(svgImage);
  svgImage.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = svgImage.clientWidth;
    canvas.height = svgImage.clientHeight;
    const canvasCtx = canvas.getContext('2d');
    canvasCtx.drawImage(svgImage, 0, 0);
    const imgData = canvas.toDataURL('image/png');
    callback(imgData);
    document.body.removeChild(imgPreview);
  };
  svgImage.src = svgUrl;
}

We have the svg variable with the SVG string.

To start, we call svgToPng with the svg string and the callback .

Then we create an img element with document.createElement and assign it to pngImage .

Then we call document.body.appendChild to append the img element to the body.

Then we set pngImage.src to the URL that we’ll get from the callback imgData parameter.

Then we create the svgToPng function which takes an svg string and the callback function.

Next, we create the svgToPng function that takes the svg and callback .

It calls the getSvgUrl function to get the base64 URL from the svg .

Then we call the svgUrlToPng functioon that does the conversion with the url and the callback to get the image data.

To create the getSvgUrl function, we just call URL.createObjectURL with the svg string converted to a Blob instance to return the base64 version of the SVG.

Then we create the svgUrlToPng function that puts the SVG into a canvas.

We do this so that we can extract the canvas content as an image binary later.

In the svgUrlToPng function, we create an img element.

Then we append the created element to the body with document.body.appendChild .

Then we set the width and height of the canvas from the svgImage sizes.

And then we call drawImage on the canvas context to draw the SVG base64 URL into the canvas.

Next, we call toDataURL with the MIME type of the image format to convert to.

Then we call the callback so that the callback runs with the imgData image data passed into it.

Then we call documen.body.removeChild to remove the preview.

We also set svgImage.src to the svgURL to add a preview.

Conclusion

We can convert an SVG into another image format with JavaScript.

Sometimes, we may want to remove everything after a given character in our JavaScript string.

In this article, we’ll look at how to remove everything after a certain character.

String.prototype.split

We can split a string with the split method.

For instance, we can write:

const url = '/Controller/Action?id=1111&value=2222'
const [path] = url.split('?')
console.log(path)

to get the path string before the question mark with split .

split returns an array of substrings separated by the given character.

So we can destructure the returned array and get the first item.

Therefore, path is: '/Controller/Action’ .

String.prototype.indexOf and String.prototype.substring

The indexOf method lets us get the index of the given character in a string.

We can use it with the substring method to extract the substring from the beginning to the given index returned by indexOf .

For instance, we can write:

const url = '/Controller/Action?id=1111&value=2222'
const path = url.substring(0, url.indexOf('?'));
console.log(path)

We call url.indexOf('?') to get the index of the question mark character.

Then we pass that into substring as the 2nd argument.

0 as the first argument means we get the substring from the first character to the index passed in the 2nd argument.

So path has the same value as before.

Regex Replace

We can also call the string replace method with a regex to remove the part of the string after a given character.

For instance, we can write:

const url = '/Controller/Action?id=1111&value=2222'
const path = url.replace(/\?.*/, '');
console.log(path)

The /\?.*/ regex matches everything from the question to the end of the string.

Since we passed in an empty string as the 2nd argument, all of that will be replaced by an empty string.

replace returns a new string with the replacement applied to it.

So path is the same value as before.

Conclusion

There are several ways we can use to extract the part of the string after the given character with several string methods.

Sometimes, we may want to add a right-click menu to a webpage.

In this article, we’ll look at how to add a right-click menu to a webpage with JavaScript.

Listening to the contextmenu and click Events

To open a context menu on right-click, we attach an event listener to the contextmenu event and call preventDefault to prevent the default action in the event listener.

The default action is to open the browser’s context menu.

Then after that, we can add code to open the menu.

To close the menu when we left-click on the page, we add a click event listener and then set the styles to close the menu.

To do this, we write the following HTML to create a context menu:

<ul id="ctxMenu">
  <li>Save</li>
  <li>Save As</li>
  <li>Open</li>
</ul>

Then we add some CSS styles by writing:

#ctxMenu {
  border: 1px solid black;
  padding: 10px;
  list-style-type: none;
  display: none;
  position: absolute;
  width: 200px;
}

We add a border and make position absolute so that the context menu will show where we right-click on the mouse.

And we set display to none so that we don’t show the menu initially.

Next, we add the event listeners by writing the following JavaScript code:

const ctxMenu = document.getElementById("ctxMenu");

window.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  ctxMenu.style.display = "block";
  ctxMenu.style.left = (event.pageX - 10) + "px";
  ctxMenu.style.top = (event.pageY - 10) + "px";
});

window.addEventListener("click", (event) => {
  ctxMenu.style.display = "";
  ctxMenu.style.left = "";
  ctxMenu.style.top = "";
});

We call window.addEventListener to listen to the events on the whole page.

In the contextmenu event handler, we call event.preventDefault to prevent the default action when we right-click, which is to open the browser’s context menu.

Then we set display to 'block' to show the ul as a block-level element.

And we set left and top to the position where the mouse pointer is right-clicked.

In the click event listener, we set the display , left and top properties all to an empty string to remove all the styles and use the ones from CSS.

Now when we right-click on the page, we see our context menu displayed instead of the browser’s menu.

Conclusion

We can create our own context menu on a web page by creating our own HTML, CSS, and JavaScript code.

Sometimes, we may store cookies on the client-side to keep track of things on the user’s device.

And sometimes, we want to delete cookies from the user’s browser.

In this article, we’ll look at how to delete a client-side cookie with JavaScript.

Create Our Own Function

Browsers don’t comes with any API to let us delete cookies easily.

Therefore, we’ve to create our own function to delete cookies from a user’s browser.

To do this, we write:

const getCookie = (name) => {
  return document.cookie.split(';').some(c => {
    return c.trim().startsWith(name + '=');
  });
}

const deleteCookie = (name, path, domain) => {
  if (getCookie(name)) {
    document.cookie = name + "=" +
      ((path) ? ";path=" + path : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01 Jan 1970 00:00:01 GMT";
  }
}

document.cookie = 'foo=bar'
deleteCookie('foo')

We create the getCookie function to check for a cookie with the given name value.

We do that by splitting the document.cookie string by the semicolon.

Then we call startsWith on the split string with the name and equal sign to check if there’s a cookie with the given key.

Next, we define the deleteCookie function that checks if the cookie with the given key exists with getCookie .

If it does, then we add a expires date and time to the end of the string by appending:

";expires=Thu, 01 Jan 1970 00:00:01 GMT"

to it.

The way to delete a cookie is to set its expiry date to a date and time before the current date and time.

Therefore, when we set the cookie in the 2nd last line and call deleteCookie with the same key right after, we won’t see the cookie being set since it’s added and removed immediately after.

Conclusion

We can delete a client-side cookie from the user’s browser by setting the expiry date of the cookie with the given key to a date and time before the current date and time.