Выполняйте обрезку изображения с помощью 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,/, "");
  }

Однако мне нужно зафиксировать ширину и высоту изображения и при попыткеПрименить урожай результат неверный.

Площадь обрезки:

Результат:

Любая помощь?