javascript - 在使用 javascript 上传之前缩小图像

Question

我正在使用 phonegap 编写跨平台移动应用程序，我有一个用于上传单张图片的文件上传输入。

问题是上传的大部分图片都是用手机拍的，大小在4MB左右。

我想大幅缩小这些图像，因为我根本不需要它们的高质量。

此外，我需要将它们转换为 base64 而不是真实图像文件。 (我已经在使用 FileReader)

有什么想法可以实现吗？也许使用 Canvas 或其他东西？

更新:这是我目前所拥有的:

function shrink() {
    var self = this;

    var reader = new FileReader(); // init a file reader
    var file = $('#file-input').prop('files')[0]; // get file from input

    reader.onloadend = function() {

        // shrink image
        var image = document.createElement('img');
        image.src = reader.result;

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, 300, 300);
        var shrinked = canvas.toDataURL('image/jpeg');
        console.log(shrinked);
    };

    reader.readAsDataURL(file); // convert file to base64*/
}

但我得到的只是一张黑色图像谢谢

Answer 1

找到答案。

问题是我在绘制之前没有等待图像完全加载。

一旦我添加

image.onload = function() {

}

然后运行它里面的所有东西。