如何使用jQuery无损缩放Canvas的Base64图片（视频快照场景）

问题根源 #

你当前的流程是先把视频帧画到320×420的canvas，转成图片后再放大到640×840，相当于先压缩再拉伸，自然会模糊。正确的思路是直接从视频源截取原始尺寸帧再按需缩放，或用插值算法优化缩放过程。

方案一：不依赖第三方库，直接截取原始帧 #

修改JS代码，跳过中间缩小再放大的冗余步骤，直接将视频帧绘制到目标尺寸的canvas上：

$("#btnCapture").click(function () {  
    videoPlayer.pause();
    
    // 创建目标尺寸的canvas（640×840）
    var canvas = document.createElement('canvas');
    canvas.width = 640;
    canvas.height = 840;
    var ctx = canvas.getContext('2d');
    
    // 开启高质量图像平滑
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    
    // 直接将视频绘制到目标尺寸canvas
    ctx.drawImage(videoPlayer, 0, 0, 640, 840);
    
    // 获取最终高清截图
    var newDataUri = canvas.toDataURL('image/png', 1.0);
    // 此处使用newDataUri即可
});

注意：如果视频本身分辨率低于640×840，此方法只能优化拉伸效果，无法完全消除模糊，这时需要用插值库辅助。

方案二：用图像插值库优化低分辨率截图 #

如果视频源分辨率不足，可使用支持高质量插值（如Lanczos算法）的前端库提升缩放清晰度，推荐pica：

步骤1：引入pica

<script src="https://cdn.jsdelivr.net/npm/pica@7.1.0/dist/pica.min.js"></script>

步骤2：修改代码实现高质量缩放

$("#btnCapture").click(function () {  
    videoPlayer.pause();
    
    // 截取视频原始帧到临时canvas（使用视频实际分辨率）
    var srcCanvas = document.createElement('canvas');
    srcCanvas.width = videoPlayer.videoWidth;
    srcCanvas.height = videoPlayer.videoHeight;
    var srcCtx = srcCanvas.getContext('2d');
    srcCtx.drawImage(videoPlayer, 0, 0);
    
    // 创建目标尺寸canvas
    var destCanvas = document.createElement('canvas');
    destCanvas.width = 640;
    destCanvas.height = 840;
    
    // 用pica执行高质量缩放
    pica.resize(srcCanvas, destCanvas, {
        quality: 3 // 最高质量，采用Lanczos插值
    }).then(function() {
        var newDataUri = destCanvas.toDataURL('image/png', 1.0);
        // 此处使用newDataUri即可
    });
});

额外提示 #

• 优先保证视频源分辨率达标，这是高清截图的核心前提
• imageSmoothingQuality属性支持low/medium/high，主流浏览器均兼容
• pica的Lanczos插值比浏览器默认的双线性插值能更好保留细节，减少模糊感

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