Author: John Au-Yeung

Sometimes, we want to convert a canvas’ content to a PDF with JavaScript.

In this article, we’ll look at how to convert a canvas’ content to a PDF with JavaScript.

Convert a Canvas’ Content to a PDF with JavaScript

To convert a canvas’ content to a PDF with JavaScript, we can use the jsPDF library.

For instance, we can write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

<canvas id="myCanvas" width="200" height="200"></canvas>

<button>
  download
</button>

to add the jsPDF library with a script tag.

Then we add the canvas elements and button to download the PDF.

Next, we write:

const canvas = document.querySelector('canvas');
const download = document.querySelector('button');
const context = canvas.getContext('2d');
const {
  jsPDF
} = window.jspdf;
const pdf = new jsPDF();

context.fillStyle = 'yellow';
context.fillRect(0, 0, 100, 100);

download.addEventListener("click", () => {
  const imgData = canvas.toDataURL("image/jpeg", 1.0);
  pdf.addImage(imgData, 'JPEG', 0, 0);
  pdf.save("download.pdf");
}, false);

to get the canvas and the button with document.querySelector .

Then we get the canvas context with canvas.getContext .

Next, we create a new jsPDF instance with:

const {
  jsPDF
} = window.jspdf;
const pdf = new jsPDF();

Then we draw a yellow square with:

context.fillStyle = 'yellow';
context.fillRect(0, 0, 100, 100);

Next, we add a click handler to the button with:

download.addEventListener("click", () => {
  const imgData = canvas.toDataURL("image/jpeg", 1.0);
  pdf.addImage(imgData, 'JPEG', 0, 0);
  pdf.save("download.pdf");
}, false);

In the event handler, we call canvas.toDataURL with 'image/jpeg' to return the image data version of the canvas.

Then we pass that into pdf.addImage with 'JPEG' to add the image into the PDF.

Finally, we call pdf.save with the file name of the PDF.

Now when we click download, we see a PDF with a yellow square.

Conclusion

To convert a canvas’ content to a PDF with JavaScript, we can use the jsPDF library.

Sometimes, we want to listen to the input event with jQuery.

In this article, we’ll look at how to listen to the input event with jQuery.

Listen to the input Event with jQuery

To listen to the input event with jQuery, we can call the on method with 'input' as the first argument.

For instance, we write:

<textarea></textarea>
<div>

</div>

to add the textarea and the div to display the inputted value.

Then we write:

$('textarea').on('input', () => {
  const text = $('textarea').val();
  $('div').html(text);
});

to call on with 'input' with a callback to get the textarea ‘s value with:

$('textarea').val()

and assign it to text .

Then we get the text and put it in the div with:

$('div').html(text)

Conclusion

To listen to the input event with jQuery, we can call the on method with 'input' as the first argument.

Sometimes, we want to find all subsets of a set in JavaScript.

In this article, we’ll look at how to find all subsets of a set in JavaScript.

Find All Subsets of a Set in JavaScript

To find all subsets of a set in JavaScript, we can use the reduce method to get all subsets of a set.

For instance, we can write:

const getAllSubsets =
  theArray => theArray.reduce(
    (subsets, value) => subsets.concat(
      subsets.map(set => [value, ...set])
    ),
    [
      []
    ]
  );

console.log(getAllSubsets([1, 2, 3]));

to create the getAllSubsets function that takes the theArray array parameter.

We then call reduce on it with a callback that takes the subsets and value parameters.

We callsubsets.concat with the array created by subsets.map with a callback that takes the value and set entries and combine them into a new subset.

The 2nd argument is an array with an empty array in it, which is the initial value of subsets .

Therefore, when we call getAllSubsets with [1, 2, 3] , we get:

[]
[1]
[2]
[2, 1]
[3]
[3, 1]
[3, 2]
[3, 2, 1]

in the array.

Conclusion

To find all subsets of a set in JavaScript, we can use the reduce method to get all subsets of a set.

Sometimes, we want to verify that an URL is an image URL with JavaScript.

In this article, we’ll look at how to verify that an URL is an image URL with JavaScript.

Verify that an URL is an Image URL with JavaScript

To verify that an URL is an image URL with JavaScript, we can create our own function and that checks the URL we want to verify against our own regex.

For instance, we can write:

const isImgLink = (url) => {
  if (typeof url !== 'string') {
    return false;
  }
  return (url.match(/^http[^\?]*.(jpg|jpeg|gif|png|tiff|bmp)(\?(.*))?$/gmi) !== null);
}

console.log(isImgLink('https://example.com/img.jpg'));
console.log(isImgLink('https://example.com/any-route?param=not-img-file.jpg'));
console.log(isImgLink('https://example.com/img.jpg?param=123'));

to create the isImgLink function that takes the url we want to check.

Then in the function, we check if url isn’t a string with the typeof operator.

If it’s not, we return false .

Otherwise, we call url.match to check against the pattern that matches image URLs.

We check for common image file extensions like jpg , jpeg , gif , png , tiff , and bmp .

The g flag checks the whole string.

We also check that there’re no dots after the extension with (?(.*)) .

Conclusion

To verify that an URL is an image URL with JavaScript, we can create our own function and that checks the URL we want to verify against our own regex.