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

【问题标题】：Shrink image before uploading with javascript在使用 javascript 上传之前缩小图像
【发布时间】：2013-02-26 00:23:02
【问题描述】：

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

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

【问题讨论】：

stackoverflow.com/questions/2434458/…（导致hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader）

标签： javascript image shrink

【解决方案1】：

找到答案了。

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

添加后

image.onload = function() {

}

并运行其中的所有内容。

【讨论】：

这与您的其他代码相比在哪里？

【解决方案2】：

我知道这是一个旧线程，但我有同样的问题关于将“加载”放置在哪里，这对我有用......

       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
       }

拍拍

【讨论】：