更改宽度和高度时，使用canvas drawImage（）发出裁剪图像

Question

我需要使用drawImage()从输入中裁剪图像。如果我以原始尺寸传递图像，则一切正常。当我尝试固定尺寸时，会得到错误的结果。

 $('#image').width(300);
 $('#image').height(300);
 getBase64Image(document.getElementById("image"));

处理图像：

function getBase64Image(img) {
    var x =  Number($('#x').val());
    var y =  Number($('#y').val());
    var x2 =  Number($('#x2').val());
    var y2 =  Number($('#y2').val());
    var h =  Number($('#w').val());
    var w =  Number($('#h').val());
    var canvas = document.createElement("canvas");
    canvas.width = 150;
    canvas.height = 150;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img,
        x,
        y,
        w,
        h,
        0,
        0,
        canvas.width,
        canvas.height
    );
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }

但是，我需要固定图像的宽度和高度，当我尝试应用裁切时，结果不正确。

收割面积：

结果：

有帮助吗？