Изменить размер изображения на момент загрузки

Question

У меня есть веб-страница с использованием JavaScript и HTML canvas. Где пользователь может сделать фотографию с помощью веб-камеры. Где находится рамка перед камерой, и эта рамка указывает, куда должна быть помещена голова пользователя. Этот кадр можно изменять и перемещать. Я хочу создать систему, в которой пользователь делает фотографию, помещая его голову и тело в рамку, и эта фотография может быть загружена в фиксированном размере. Мой код делает то же самое, только одна проблема: если я не изменяю размер фрейма, он даст выходное изображение в точном желаемом размере, но если я изменяю размер фрейма, размер изображения становится больше или меньше. Но я хочу загрузить изображение в точном размере, независимо от того, насколько велик или мал размер кадра. Выходное изображение должно быть изменено до точного размера. Мой код:

 <div>
    <h3>Photo Taking Frame</h3>
    <div id="frameholder">
        <div id="resizable_frame">
            <img src="./framee.png"/>
        </div>        
        <div id="my_camera">
        </div>
    </div>
</div>
<div id="actions">
    <h3>Action Buttons</h3>
    <div>
        <a href="javascript:void(take_snapshot())"><button>Take Snapshot</button></a>
    </div>
</div>
<div id="output">
        <div id="my_result"></div>
</div>
<script language="JavaScript">
    // Adjust CSS according to this value #resizable_frame , #resizable_frame>img
    var webcam_width = 480;
    var webcam_height = 320;
    var img_width = 126.72;
    var img_height = 161.28;
    var buffer = null;


    Webcam.set({
        // live preview size
        width: webcam_width,
        height: webcam_height,

        // device capture size
        dest_width: webcam_width,
        dest_height: webcam_height,


        image_format: 'png'
    })
    Webcam.attach( '#my_camera' );
    function take_snapshot()
    {
        Webcam.snap( function(data_uri) {
            let p = $( "#resizable_frame" ).first();
            let position = p.position();
            let resizable_frame_width =  $('#resizable_frame').width();
            let resizable_frame_height =  $('#resizable_frame').height();
            let img_data = crop (data_uri, position.left, position.top, resizable_frame_width, resizable_frame_height)
            // console.log(img_data);
        } );
        // Webcam.freeze();
    }
    function crop (strDataURI, offsetX, offsetY, width, height)
    {
        buffer = document.createElement('canvas');
        let b_ctx = buffer.getContext('2d');
        let img = new Image();
        let cropped = "";
        // console.log(img)
        img.onload = function() {
            buffer.width = width;
            buffer.height = height;
            b_ctx.width = width;
            b_ctx.height = height;
            // draw the main canvas on our buffer one
            b_ctx.drawImage(img, offsetX, offsetY, width, height , 0 , 0 , width , height);
        }
        img.src = strDataURI;            

        // document.getElementById('my_result').innerHTML = '<img src="'+strDataURI+'"/>';
        setTimeout(function(){
            let outImg = '<img id="outputImg" src="'+ buffer.toDataURL("image/png")+'"/>';
            let dlBtn = "<a href='"+buffer.toDataURL("image/png")+ "' download>Download image</a>";
            document.getElementById('my_result').innerHTML = outImg+'<br>'+dlBtn;
        },1000)
    }

    function download_image(buffer){
        dlimg = buffer.toDataURL("image/png");
        var link = document.createElement('a');
        link.download = "image.png";
        link.href = dlimg.replace("image/png", "image/octet-stream");
        link.click();
    }

    $('#resizable_frame').resizable({
        aspectRatio: img_width / img_height,
        maxHeight: webcam_height,
        maxWidth: webcam_width,
        minHeight: img_height,
        minWidth: img_width
    });
    $( "#resizable_frame" ).draggable({ 
        containment: "parent" 
    });
    $('#resizable_frame').bind('resize', function(){
        $('#resizable_frame>img').width($(this).width())
        $('#resizable_frame>img').height($(this).height())
    });

</script>