10

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

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

4

2 回答 2

2

Found the answer.

The problem was that i wasn't waiting for the image to fully load before drawing it.

once i added

image.onload = function() {

}

and ran everything inside it works.

于 2013-03-10T23:00:39.473 回答
1

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

       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
       }

拍

于 2015-12-17T23:20:45.057 回答