使用javascript上载前收缩图像

我正在使用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*/
}

但我得到的只是一张黑色的照片 谢谢你找到了答案

问题是我没有等到图像完全加载后再绘制它

一旦我加上

image.onload = function() {

}

---

我知道这是一个旧线程，但我有一个相同的问题，关于“加载”的位置，这对我很有用

       navigator.camera.getPicture(function (imageURI) {
           console.log("*** capture success. uri length...", imageURI.length);            
           var image = document.createElement('img');
           image.onload = function() {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                ctx.drawImage(image, 0, 0, 300, 300);
                var shrunk = canvas.toDataURL('image/jpeg');
                console.log(shrunk);
                // used shrunk here
            }
            image.src = imageURI; // triggers the onload
       }           

---

pat

（这导致）这与代码的其余部分有什么关系？