JavaScript如何提取HTML内base64图片并等比例缩放生成预览

• 我是编程新手，目前有一段用于展示base64格式图片的HTML代码，其中图片为动态资源，尺寸不固定。
• 功能需求：对该类base64图片做缩放处理，保持原始宽高比生成小尺寸预览模式，缩放规则参考示例：
  • 原图尺寸为600x300时，预览图尺寸需为300x150
  • 原图尺寸为1000x500时，预览图尺寸需为500x250
• 当前进度：已编写好用于图片缩放的JavaScript代码，但无法确定如何从HTML代码中获取图片对应的base64数据来落地完整逻辑。
• 补充说明：因HTML代码过长无法直接粘贴在此处，对应示例代码托管在CodePen平台，路径标识为/Gilavani/pen/JjLXBOb

function resizedataURL(datas, wantedWidth, wantedHeight)
{
    // 创建图片元素接收Data URI
    var img = document.createElement('img');

    // 图片加载完成后触发缩放逻辑
    img.onload = function()
        {        
            // 创建canvas元素并获取2D绘图上下文
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            // 将canvas尺寸设置为目标缩放尺寸
            canvas.width = wantedWidth;
            canvas.height = wantedHeight;

            // 通过drawImage方法将原图绘制到缩放尺寸的canvas上
            ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight);

            var dataURI = canvas.toDataURL();

            /////////////////////////////////////////
            // 在此处编写缩放后Data URI的使用逻辑  //
            /////////////////////////////////////////
        };

    // 将传入的base64数据赋值给图片src，触发图片加载
    img.src = datas;
}

提前感谢各位的帮助，致以诚挚问候。

内容的提问来源于stack exchange，提问作者Artem.