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

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

- shaharmor

---

请转到https://dev59.com/mHE95IYBdhLWcg3wJKl_（指向http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/）了解有关在上传到服务器之前使用JavaScript在客户端调整图像大小的信息。 - Sygmoral

Answer 1

找到了答案。

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

一旦我添加了

image.onload = function() {

}

并且在其中运行的所有内容都可以正常工作。

- shaharmor

---

这段代码与您的其余代码有什么关联？ - Zairja

Answer 2

我知道这是一个旧的帖子，但我也有关于“何时放置'on load'”的同样问题，对我来说这个解决方案有效...

       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

- Pat