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

}

并将其中的所有内容都运行起来。

Answer 2

我知道这是一个旧线程，但我有同样的问题，关于在何处放置＆＃34;在负载＆＃34;这对我有用......

       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
       }

拍

使用javascript上传前缩小图片

2 个答案: