将图像剪切并缩放到画布，而不会降低质量

如何解决将图像剪切并缩放到画布，而不会降低质量

我正在尝试使用X，Y坐标和W，H尺寸裁剪原始图像的一部分，并将其放置在画布上。

这是我的codepen示例

img.onload = function () {
    var boxSize = box.getBoundingClientRect();

    canvas.width = boxSize.width;
    canvas.height = boxSize.height;

    var hRatio = boxSize.width / w;
    var vRatio = boxSize.height / h;
    var ratio = Math.min(hRatio,vRatio);
    var centerShift_x = (canvas.width - w * ratio) / 2;
    var centerShift_y = (canvas.height - h * ratio) / 2;

    var ctx = canvas.getContext("2d");
    
    ctx.fillStyle = "blue";
    ctx.fillRect(0,canvas.width,canvas.height);

    ctx.drawImage(
      img,w + x,h + y,(-x * ratio) + centerShift_x,-y * ratio + centerShift_y,(w + x) * ratio,(h + y) * ratio
    );
  };

图像比画布大得多，因此我希望图像质量不会降低，至少不会太大。但实际上质量非常低。

那么，如何不降低质量呢？

解决方法

x <- "some text in a string" str_left(x,4) [1] "some" str_right(x,6) [1] "string" str_mid(x,6,9) [1] "text" 上下文方法会将您的源图像缩放到画布大小。您需要创建一个比所需的实际图像尺寸大的画布，然后使用css / style将其缩放到客户端中较低的分辨率。

您可以尝试将drawImage的值替换为y