0

我正在尝试创建一个函数，该函数接收具有宽度和高度的 base 64 图像数据，并在 javascript 中返回具有给定宽度和高度的调整大小的 base 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;
}

我厌倦了这篇文章，但它对我没有用。我目前正在研究寻找在 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();
        }

我该如何解决这个问题？

4

2 回答 2

0

这个实现对我很有用。

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();
}
于 2014-08-15T23:22:41.283 回答
0

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

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

PS请看我对这个问题的回答：https ://stackoverflow.com/a/26884245/4034886

如果您对该代码有其他问题，请随时问我；）

对不起，我蹩脚的英语顺便说一句。

于 2014-11-12T13:57:22.847 回答