Javascript JS函数，参数为image、width、height，并返回调整大小的base 64图像数据

我正在尝试创建一个函数，该函数接收具有宽度和高度的Base64图像数据，并在javascript中返回具有给定宽度和高度的大小调整后的Base64图像数据。本质上是这样

function imageResize(img, width, height) {
    var newImg; 
    //PLAN:transform img with new width and height.
    // - change width
    // - change height
    // - convert back to base 64 data
    return newImg;
}  

我跟随很累，但我没有成功。我目前正在研究如何在js中转换图像，并将在发现新线索后更新帖子。是否有一个函数已经完成了我要做的事情？如果不是伪代码中的一个或多个组件？任何建议都将不胜感激

这是我试图实现的当前函数，但它返回一个空白画布，上面没有实际绘制的img

function imageResize(img, width, height) {

            /// create an off-screen canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            /// set its dimension to target size
            canvas.width = width;
            canvas.height = height;

            /// draw source image into the off-screen canvas:
            ctx.drawImage(img, 0, 0, width, height);

            /// encode image to data-uri with base64 version of compressed image
            return canvas.toDataURL();
        }

---

我如何解决这个问题

这个实现对我来说非常有效

function imageToDataURL(image, width, height) {
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(image, 0, 0, width, height);
        return canvas.toDataURL();
}

---

在画布上绘制图像时是否加载图像

您必须在图像加载后调用drawImage方法，以便将其加载到图像的onload事件的处理程序函数中，如下所示：

// You create your img
var img = document.createElement('img');

// When the img is loaded you can treat it ;)
img.src = 'your_data_url/your_url';

function imageResize(img, width, height) {

        /// create an off-screen canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        /// set its dimension to target size
        canvas.width = width;
        canvas.height = height;
        img.onload = function() { 
            /// draw source image into the off-screen canvas:
            ctx.drawImage(this, 0, 0, width, height); 
            var dataUrl = ctx.toDataURL();
            // Here you can use and treat your DataURI
        };
    }

JavaScript是一种异步语言，这意味着在加载图像或视频等对象时，它不会中断代码的执行

在加载对象完成时，它将触发一个名为“load”的事件，并在加载对象时调用事件处理程序（您以前定义的函数）

请看我对这个问题的回答：

如果您对该代码还有其他问题，请尽管问我；）

---

对不起，我的英语很糟糕。

有什么原因不能使用canvas吗？@ChrisHodges我不想更改或添加我的html元素，我想知道是否可以为它创建一个js函数。