如何在使用Canvas转换时保留JPEG条码图片的原始画质？

我有一个表单，以JPEG格式展示大量条码图片。右键点击图片选择“另存为”时，文件会以JPEG原始画质保存：

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

但当我使用Canvas将这些条码转换为Blob时，生成的新JPEG图片分辨率低，条码无法扫描。相关代码如下：

Canvas渲染代码：

$(`.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); // 生成低画质的PNG
});

Blob转换代码：

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

请问如何在新Blob或Canvas元素中保留原始画质？

解决方案 #

方案一：直接获取原始图片Blob（推荐） #

条码图片本身是服务器返回的完整JPEG资源，完全没必要通过Canvas二次渲染。直接请求原始图片的Blob，能100%保留画质：

$('.barcodeImg').each(async function() {
    const imgEl = this;
    // 请求原始图片资源
    const response = await fetch(imgEl.src);
    const originalBlob = await response.blob();
    
    // 复制Blob并添加自定义属性
    const targetBlob = new Blob([originalBlob], { type: originalBlob.type });
    targetBlob.lastModifiedDate = new Date();
    targetBlob.name = imgEl.getAttribute('filename');
    
    // 示例：生成下载链接
    const downloadUrl = URL.createObjectURL(targetBlob);
    const downloadLink = document.createElement('a');
    downloadLink.href = downloadUrl;
    downloadLink.download = targetBlob.name;
    downloadLink.click();
    URL.revokeObjectURL(downloadUrl);
});

方案二：优化Canvas渲染（必须用Canvas时） #

如果业务需求必须通过Canvas处理图片，需调整渲染参数避免细节丢失：

$(`.barcodeImg`).each(function() {
    const imgEl = this;
    const canvas = document.createElement('canvas');
    // 严格匹配图片原始尺寸
    canvas.width = imgEl.naturalWidth;
    canvas.height = imgEl.naturalHeight;
    const ctx = canvas.getContext('2d');
    
    // 关闭图像平滑，保留条码锐利边缘
    ctx.imageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    
    ctx.drawImage(imgEl, 0, 0);
    
    // 转换Blob时确保质量拉满
    canvas.toBlob((blob) => {
        blob.lastModifiedDate = new Date();
        blob.name = imgEl.getAttribute('filename');
        // 后续处理逻辑
    }, 'image/jpeg', 1.0);
    
    document.getElementById('canvasResults').appendChild(canvas);
});

内容的提问来源于stack exchange，提问作者Chris