I have a form that displays a bunch of barcodes in jpeg format. When I right-click on the image and choose “saveAs”, the file is saved with the original quality of the jpeg:

<div style="float:left;width:33%;text-align:center;margin:2em 0 0 0;">
    <img class="barcodeImg" src="GenBarcode.asp?height=12&text=AKH32-8-A-YRS" filename="AKH32-8-A-YRS (Adult Fitted Hat).jpg" crossorigin="anonymous">
</div>

However, when I convert those bardcodes to blobs using a canvas, the canvas renders the barcode as a png, thereby reducing the quality of the image. When I save that canvas, the bardcode is no longer scannable. It has lost a lot of it’s resolution.

$(`.barcodeImg`).each(function() {
    const img = $(this);
    const cvs = document.createElement(`canvas`);
    cvs.width = img[0].naturalWidth;
    cvs.height = img[0].naturalHeight;
    const ctx = cvs.getContext(`2d`);
    ctx.drawImage(img[0], 0, 0);
    document.getElementById(`canvasResults`).appendChild(cvs); // <-this results in a low-quality .png.
});

Converting to a blob:

cvs.toBlob((blob) => {
    blob.lastModifiedDate = new Date();
    blob.name = filename;
    }
},`image/jpeg`,1);

The new jpeg image is low res and unscannable.

How do I retain the original quality in the new blob or in the canvas element?