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

答えが見つかりました。

問題は、画像を描画する前に、画像が完全に読み込まれるのを待っていなかったことです。

追加したら

image.onload = function() {

}

そして、その中のすべてを実行しました。

于 2013-03-10T23:00:39.473 に答える