如何在不损失质量的情况下使用 jQuery 调整画布图像（base64）的大小？答案

【问题标题】：How to resize canvas image(base64) using jQuery without losing quality?如何在不损失质量的情况下使用 jQuery 调整画布图像（base64）的大小？
【发布时间】：2022-07-21 04:17:35
【问题描述】：

目前，我正在尝试从 <video> 拍摄快照，预览分辨率为 320*420。我想加倍 res 所以结果会更大。当尝试调整大小时，结果是模糊的。我应该实现任何库吗？

HTML

<style>
#videoframe{
   border: 10px solid black;
   height:320px;
   margin-bottom:20px; 
   width:420px;
   padding:0;
   overflow:hidden;
   position:relative;
}
</style>

<div class="col-lg-6" id="videoframe">
          <video style="margin:0;width: 100%; height:100%;" id="player" webkit-playsinline="true" autoplay playsinline>
           </video>
   </div> 
   <canvas id="c" width="320"height="420" ></canvas>

function imageToDataUri(img, width, height) {

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);

    return canvas.toDataURL('image/png', 1.0);
}
$("#btnCapture").click(function () {  
        videoPlayer.pause();
        
        var canvas = document.getElementById("c")
        var ctx = canvas.getContext('2d');
        ctx.drawImage(videoPlayer, 0,0 ,320, 420);
        image = canvas.toDataURL('image/png',1.0);

        //Resize
        var img = new Image;
        img.onload = resizeImage;
        img.src = image;

        function resizeImage() {
            var newDataUri = imageToDataUri(this, 640, 840);
            //NewDataUri is final result
        }
});

【问题讨论】：

为什么ctx.drawImage(videoPlayer, 0,0 ,320, 420);不能画大一点？

标签： canvas html5-video video-capture image-resizing

【解决方案1】：

默认情况下，CanvasRenderingContext2D 的 drawImage() 方法会应用某种插值，例如绘制给定源时的最近邻或双线性。幸运的是，您可以通过在绘制之前将 .imageSmoothingEnabled 属性设置为 false 来禁用此行为。

例如：

function imageToDataUri(img, width, height) {

  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  canvas.getContext('2d').imageSmoothingEnabled = false;
  ctx.drawImage(img, 0, 0, width, height);

  return canvas.toDataURL('image/png', 1.0);
}

let image = new Image();
image.crossOrigin = "anonymous"
image.onload = (e) => {
  var canvas = document.getElementById("c")
  var ctx = canvas.getContext('2d');
  ctx.drawImage(e.target, 0, 0, e.target.naturalWidth, e.target.naturalHeight);
}
image.src = "https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/320/420"
document.getElementById("btnCapture").addEventListener("click", (e) => {

  var canvas = document.getElementById("c")
  var ctx = canvas.getContext('2d');

  image = canvas.toDataURL('image/png', 1.0);

  //Resize
  var img = new Image;
  img.onload = resizeImage;
  img.src = image;

  function resizeImage() {
    var newDataUri = imageToDataUri(this, 640, 840);
    let img = new Image();
    img.src = newDataUri;
    document.body.appendChild(img);
    let anchor = document.createElement("a");
    anchor.href = newDataUri;
    anchor.download = "capture.png";
    anchor.click();
  }
});

<canvas id="c" width="320" height="420"></canvas>
<input type="button" id="btnCapture" value="capture">

【讨论】：