Question

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

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;
}

我厌倦了this post，但它并没有为我效劳。我目前正在研究如何在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();
        }

如何解决此问题？

Answer 1

这个实现对我很有用。

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();
}

Answer 2

将图像绘制到画布上时是否加载了图像？

你必须在加载图像后调用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”的事件，并在加载对象时调用事件处理程序（您之前定义的函数）。

请参阅我对此问题的回答：https://stackoverflow.com/a/26884245/4034886

如果您对该代码有其他问题，请不要犹豫，问我;）

抱歉，我的英文糟糕。

JS函数具有参数图像，宽度，高度并返回一个调整大小的基础64图像数据

2 个答案: