使用javascript上传前缩小图片

Question

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

问题是上传的大多数图片都是使用手机拍摄的,大小约为4MB.

我想大幅缩小这些图像,因为我根本不需要高质量的图像.

另外,我需要将它们转换为base64而不是真实的图像文件.(我已经使用FileReader了)

任何想法如何实现这一目标？也许使用帆布或什么？

更新: 这是我到目前为止:

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() {

}

并运行其内部的所有内容。