1

サーバーにアップロードするために画像のサイズを変更する必要があるWebworksアプリに取り組んでいます。私は JQuery Mobile を使用しています。アプリは OS6 以降で実行する必要があります。ユーザーは、カメラを使用するか、デバイスから画像を選択できます。関連するコードは次のとおりです。

function handleOpenedFile(fullPath, blobData) {
            var image = new Image();
            image.src = fullPath; //path to image
            image.onload = function () {
                var resized = resizeMe(image); // send it to canvas
                //Do stuff with the DataURL returned from resizeMe()
            };
    }

function resizeMe(img) {

        var canvas = document.createElement('canvas');
        var width = Math.round(img.width / 2);
        var height = Math.round(img.height / 2);
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        return canvas.toDataURL("image/jpeg", 0.8);
    }

次に、DataURL で Base64 を使用してサーバーにアップロードします。画像は拡大縮小されますが、文字化けします。画像の一部がずれたり、色がおかしくなったりします。スケーリングなしでキャンバスに描画すると文字化けして画像が台無しになるのは、スケーリング自体ではありません。

SO と BB Dev フォーラムの両方を広範囲に検索しましたが、うまくいきませんでした。

これを修正する方法や、アップロードする画像のサイズを変更するための別の提案がある人はいますか?

4

2 に答える 2

1

なぜそれが機能するのかはわかりませんが、問題を解決することができました。交換するだけ

return canvas.toDataURL("image/jpeg", 0.8);

と

return canvas.toDataURL();

これは、適切にサイズ変更された画像を含む base64 でエンコードされた文字列を返します。奇妙な視覚的アーティファクトはありません。

于 2013-07-22T09:56:00.457 に答える
0

JQuery モバイル、OS6 で実行されているアプリ、またはサーバーにアップロードするために DataURL で Base64 を使用しているアプリでは役に立ちませんが、関数 resizeMe のコードはキャンバスを HTML ドキュメントのどこにも配置しません。

以下に必要な行を追加します。

関数 resizeMe(img) {

    var canvas = document.createElement('canvas');
    var width = Math.round(img.width / 2);
    var height = Math.round(img.height / 2);
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);   //append canvas child to body <<<<-----------
    ctx.drawImage(img, 0, 0, width, height);
    return canvas.toDataURL("image/jpeg", 0.8);
}

この余分な行が以下の jsfiddle で見落とされている場合、画像がまったく得られず、適切に形成されたスケーリングされた画像が得られます。フィドルは私のアンドロイドスマートフォンで動作します。

http://jsfiddle.net/FeALQ/

于 2013-07-19T16:50:51.067 に答える